相对定位 relative
2023-06-04 本文已影响0人
乔布斯瞧不起
相对定位(relative)是CSS定位的一种方式。
当一个元素的position设置为relative时:
- 元素仍然占据原文档流的位置,其他元素的位置也不会变。
- 可以使用offset属性(top、right、bottom、left)来定义偏移量,相对于自身在文档流中的位置进行移动。
- 相对定位的元素会创建一个新的堆叠上下文。其他元素不会占据它的堆叠上下文。
- 特点是相对于自身原位置定位,微调位置,不影响其他元素。
示例:
html
<div class="outer">
<div class="static">static div</div>
<div class="relative">relative div</div>
</div>
css
.outer {
position: relative;
}
.static {
position: static;
background: #ff0;
}
.relative {
position: relative;
top: 20px;
left: 20px;
background: #f0f;
}
结果:
static div
relative div
.relative元素虽然偏移了20px,但其实仍占据原文档流位置,只是视觉上移动了。其他元素位置不变。
相对定位的应用场景:
- 用于微调元素位置,不影响其他元素布局。
- 作为绝对定位元素的参考框。绝对定位的参考父框如果无定位,会一直往上找,直到<html>。如果给其父元素相对定位,则以此为参考框。
- 创建堆叠上下文,控制元素的前后层叠顺序,而不影响布局。
- 实现元素的动画移动等效果。
总之,相对定位是一个既能满足定位需求,又不影响文档流和布局的一种值得推荐的定位方式。它的特点是:
- 相对于自身原位置定位。
- 保留原文档流位置,不影响其他元素。
- 可以偏移。
- 创建新的层叠上下文。
熟悉了相对定位,我们就掌握了一个既强大又不影响布局的定位手段。可以运用在各种需求场景中,完成元素的定位与层叠控制。
