html中怎么让div层固定在屏幕中央右边500像素的位置
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html中怎么让div层固定在屏幕中央右边500像素的位置相关的知识，希望对你有一定的参考价值。
显示屏是可变大小的，不同的像素条件下都要让div层固定在屏幕中央右边500像素的位置。高分求助。
显示屏是可变大小的:意思就是网站是供不同的人浏览的，每个人的显示器都不一样。
让div层固定在屏幕中央右边500像素的位置：过程就是无论什么显示器，先选取最中间的一点，然后以这个中心点往右边偏移500像素，明白？
<html>
<head>
<tltle>diV固定位置</tltle>
<style>
div
width:300px;
height:300px;
position:absoult;
right:500px; //只是假设的数据，需要实际测量
top:400px;
</style>
</head>
<body>
<div>我是测试文字</div>
</body>
</html> 参考技术A 简单啊
绝对定位啊
用JS写
直接用JS得到屏幕的宽度，那么中心的坐标就是屏幕的宽度/2
在用JS得到外围容器的宽度，拿屏幕的宽度-外围容器的宽度得到边缘的宽度
这样在拿中心的坐标-边缘的宽度，就得到当前站点容器中心宽度的坐标了
然后吧外围容器设置相对定位，你的DIV层设置绝对宽度
left设置为容器中心宽度坐标+500就行了
注意写JS的时候要注意浏览器兼容性
最后写出来的坐标要加px本回答被提问者采纳 参考技术B 不知道你的“固定中央又距离右边500px什么意思”，按我的理解写了一个，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function()
for(var i = 0;i<200;i++)
document.getElementById('outer').innerHTML += i + '<br />';
</script>
<style type="text/css">
*
padding:0;
margin:0;
#outer
height:3000px;
#fixed
position:fixed;
width:200px;
height:200px;
right:500px;
top:50%;
margin:-102px 0 0 0;
border:solid 2px gray;
background:white;
#ruler
position:fixed;
border-bottom:solid 1px #ccc;
text-align:center;
width:500px;
right:0;
top:50%;
</style>
</head>
<body>
<div id="outer"></div>
<div id="fixed">yummmy! I m fixed guy:D</div>
<div id="ruler">500px away from the right side</div>
</body>
</html> 参考技术C <div style='margin-right:500px'></div>
你如果想让他固定在每个位置，针对不同的显示器就用
<div style='margin-left:50%;></div>
用百分数 具体位置你改百分比 参考技术D 设置层的属性：<div style="position:fixed; right:500PX;"></div>
以上是关于html中怎么让div层固定在屏幕中央右边500像素的位置的主要内容，如果未能解决你的问题，请参考以下文章