还有，请使用documentgetElementById这样的方式定位元素对象，不要用documentdivA这样的方式，现在浏览器可能支持的不好。
<div id="divA" style="position:absolute;">divA的内容</div>
<script>
documentgetElementById("divA")styleleft = "400px";
</script>
CSS中的position property一共有四种：
postion: static
postion: relative
position: fixed
position: absolute
如果设置div为static postion, div的位置将不受top,right,left,button等变量的影响，而是按照正常的页面布局进行排版。例：
divstatic {
position: static;
border: 3px solid #8AC007;
}
如果设置div为relative position, 其变量的值将会使div的位置相对其正常(default)位置进行移动。例：
divrelative {
position: relative;
left: 30px;
border: 3px solid #8AC007;
}
如果设置div为fixed position, div将会被固定在窗口的固定位置。也就是说无论你如何上下移动页面, div在屏幕上显示的位置始终不变。
divfixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #8AC007;
}
如果设置div为absolute position, div将会相对于其最近的position ancestor定位。absolute position是可以随页面移动而移动在屏幕上的位置的。
divabsolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #8AC007;
}
以上CSS你可以放到自己的网页应用里试一下，区别就很明显了。
参考资料：
<html>
<head>
<tltle>diV固定位置</tltle>
<style>
div{
width:300px;
height:300px;
position:absoult;
right:500px; //只是假设的数据，需要实际测量
top:400px;
}
</style>
</head>
<body>
<div>我是测试文字</div>
</body>
</html>
1、新建一个html文件，命名为testhtml
2、在testhtml文件内，使用css设置页面所有的div宽度为300px，高度为300px，div的位置为绝对定位。
3、在testhtml文件内，创建三个div，并用文字标识，分别为底层div、中层div、最顶层div。
4、在testhtml文件内，分别给三个div设置class属性为one、two、three，用于下面对类名进行样式设置。
5、在css标签内，设置类名为one的div样式，设置其背景颜色为红色，距离页面左边缘为0，距离页面上边缘为0，同时使用z-index设置其层级为1。
6、在css标签内，设置类名为two的div样式，设置其背景颜色为**，距离页面左边缘为50px，距离页面上边缘为50px，同时使用z-index设置其层级为2，即在类名为one的div的上面。
7、在css标签内，设置类名为three的div样式，设置其背景颜色为粉红色，距离页面左边缘为100px，距离页面上边缘为100px，同时使用z-index设置其层级为3，即在页面三个div中的最顶层。
8、在浏览器打开testhtml文件，查看实现的层级效果。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）