绝对定位 absolute
2023-06-04 本文已影响0人
乔布斯瞧不起
绝对定位(absolute)是CSS定位的一种方式。
当一个元素的position设置为absolute时:
- 元素会被移出正常文档流,不再占据原先的空间。
- 元素的位置相对于离元素最近的已定位的父元素。如果无已定位的父元素,则相对于<html>。
- 可以使用offset属性(top、right、bottom、left)来定义偏移量。
- 绝对定位也会创建一个新的堆叠上下文。其他元素不会占据它的堆叠上下文。
- 特点是相对于参考父元素定位,完全移出文档流。
示例:
html
<div class="outer">
<div class="static">static div</div>
<div class="relative">
<div class="absolute">absolute div</div>
</div>
</div>
css
.outer {
position: relative;
}
.static {
position: static;
background: #ff0;
}
.relative {
position: relative;
background: #f0f;
}
.absolute {
position: absolute;
top: 20px;
right: 0;
background: #0ff;
}
结果:
static div
relative div
absolute div
.absolute元素相对与离它最近的已定位父元素.relative进行定位,所以位于其内部,向下偏移20px。
绝对定位的应用场景:
- 用来实现元素的精确定位。通过调整top、right、bottom、left可以放置在任意位置。
- 常用于实现子元素的居中定位。设置父元素相对定位,子元素绝对定位并设置四个方向的值为0,可以完成居中效果。
- 用于创建重叠的元素效果。绝对定位的元素会脱离文档流,可以重叠在其他元素之上。
- 配合z-index控制堆叠顺序,实现各种悬浮和凸显的效果。
绝对定位是一个比较强大的定位手段,但由于它会完全脱离文档流,所以使用时需要注意: - 若无已定位的父元素,会相对于<html>定位,导致潜在兼容问题。
- 其他元素会占据它原先的空间,可能影响布局。
- 绝对定位的元素是相对于参考父元素的内边框进行定位的。
- 要配合overflow等属性避免绝对定位的元素超出父元素范围。
所以,熟练掌握绝对定位,需要了解其定位特性,并注意其潜在的影响与问题。只有在理解其工作机理的前提下,才能自由运用,完成各种定位与覆盖的需求。绝对定位是一个强大而富于挑战的定位手段。
