您的位置：首页 > Web前端 > CSS

详解css中的position属性

2014-02-28 15:09 447 查看

这一次直接进入主题。

css中最常用的布局类属性，一个是float，另一个就是定位属性position。

对于position来讲，有以下属性值：

static : 无特殊定位，对象处于正常文档流。其中，left/right/top/bottom/z-index均无法生效。
relative : 对象遵循正常文档流。但将依据left/right/top/bottom等属性在正常文档流中偏移位置。可通过设置z-index控制层叠优先级。
absolute : 对象脱离正常文档流。配合使用left/right/top/bottom等属性进行绝对定位。同样，可以通过z-index控制其层叠优先级。
fixed : 对象脱离正常文档流。配合使用top,right,bottom,left等属性以当前浏览器窗口进行定位。当出现滚动条时，对象不会随着滚动。其层叠属性通过z-index控制。

所谓文档流，是指浏览器在渲染页面时，从上至下，从左至右的渲染和排列元素。有三种手段可以使指定的元素脱离文档流，即浮动、绝对定位和相对定位。

下面我们来分别探讨position指定的定位方式。

1，静态定位(static)
static是html元素默认的定位方式，它遵循正常的文档流渲染。为元素指定left/right/top/bottom及z-index均无效。

2，相对定位(relative)
顾名思义，relative及相对定位。这里的重点是相对，相对于什么地方而言呢？我们来做一个测试。

(1)，原始未定位

<head>
<style type="text/css">
#divA{
width:300px;
height:100px;
border:1px solid blue;
position:relative;
margin:20px;
padding:20px;
}
#divB{
width:300px;
height:100px;
border:1px solid red;
position: absolute;
top:20px;
left:20px;
}
</style>
</head>
<body>
<div id="divA">
contentA

<div id="divB">
contentB
</div>
</div>

</body>

View Code
页面显示为：

显而易见，祖先类的margin会让子类的absoulte跟着偏移，而padding却不会让子类的absoulte发生偏移。总结一下，就是absoulte是根据祖先类的border进行的定位。

4，固定定位(fixed)
fixed定位，又称为固定定位，它和absoult定位一样，都脱离了文档流，并且能够根据left/right/top/bottom属性进行定位，但不同的是fixed是根据窗口为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移。

5，z-index属性

z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。

需要注意的是，使用static定位或无position定位的元素z-index属性是无效的。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航