本文详细介绍了CSS中的position属性，包括static、absolute、fixed和relative四种定位方式，并通过实例展示了它们对元素位置的影响。同时，解释了z-index属性如何控制层叠顺序，以及在relative和absolute定位下的不同表现。通过示例代码，读者可以更好地理解CSS定位在网页布局中的应用。
1. position属性
position是定位属性。
position : static | absolute| fixed| relative
static : 遵循HTML定位规则。
absolute : 位置相对离元素最近父级文档流的左上角，会脱离文档流，飘起来，使用left，right，top，bottom等属性进行绝对定位。
relative : 位置相对于自己的当前位置，不会脱离文档流，使用left，right，top，bottom等属性定位。
fixed : IE5.5及NS6尚不支持此属性，固定定位，位置相对于浏览器。
2. z-index属性
z-index是层的重叠顺序。
z-index : auto | number
auto: 默认值。
number: 无单位的整数值，可为负数。
3. 测试代码(取值relative)
div {
width: 100px;
height: 100px;
}
div.box1 {
background: #dad7d7;
position: relative;
z - index: 1;
}
div.box2 {
background: #ffe7bc;
position: relative;
top: -50px; /** **/
left: 50px;
z - index: 2;
}
div.box3 {
background: red;
position: relative ;
top: -100px;
left: 100px;
z - index: 3;
}
换行，影响了BOX - 1、BOX - 2和BOX - 3的位置。
4. 测试代码(取值absolute)
div {
width: 100px;
height: 100px;
}
div.box1 {
background: #dad7d7;
position: absolute ;
z - index: 1;
}
div.box2 {
background: #ffe7bc;
position: absolute ;
top: 100px;
left: 100px;
z - index: 2;
}
div.box3 {
background: red;
position: absolute ;
top: 150px;
left: 150px;
z - index: 3;
}
换行，影响了BOX - 1的位置，BOX - 2和BOX - 3的位置没有影响。
扫一扫
661
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
