position 属性可以取以下几个值:
1. static: 默认值。元素在正常文档流中定位,即元素出现在文档中的位置,不受其他定位属性影响。
2. relative: 相对定位。元素相对于其正常位置进行定位,但仍然在文档流中。使用 top、right、bottom、left 等属性可以调整元素的位置。
3. absolute: 绝对定位。元素相对于其最近的非static(非静态定位)的父元素进行定位。如果没有这样的父元素,则相对于 <html> 元素。与 relative 不同,absolute 会脱离文档流,不占据原来的空间。
4. fixed: 固定定位。元素相对于浏览器窗口进行定位,即使页面滚动,元素的位置也不会改变。与 absolute 类似,也脱离文档流。
5. sticky: 粘性定位。元素在跨越特定阈值前为相对定位,之后为固定定位。它会在跨越阈值时表现为 relative 和 fixed 的混合。
使用示例:
.box {
position: relative; /* 相对定位 */
top: 10px; /* 距离顶部10像素 */
left: 20px; /* 距离左侧20像素 */
}
.absolute-box {
position: absolute; /* 绝对定位 */
top: 50px; /* 距离最近的非static定位的父元素顶部50像素 */
left: 30px; /* 距离最近的非static定位的父元素左侧30像素 */
}
.fixed-box {
position: fixed; /* 固定定位 */
top: 0; /* 距离浏览器窗口顶部0像素 */
right: 0; /* 距离浏览器窗口右侧0像素 */
}
这些定位属性可以通过调整 top、right、bottom、left 等属性来更精确地定位元素。
转载请注明出处:http://www.zyzy.cn/article/detail/4240/CSS