放置绝对元素后，将相对元素放在页面流中

Question

我确信这是每个​​人都进入的事情。我得到了一个解决方案，但我正在寻找最好的方法和更坚实的方法来做到这一点。

基本上我要做的是在放置绝对元素后将所有相关元素放在页面流中。

只要position:absolute红色div，剩余的position:relative元素就会在绝对定位的内容之上流动。我找到的解决方案是创建一个这样的偏移类：

.offset {
  position: relative;
  top: 830px;
}

并将其应用于红色div后面的每个（该死的）元素。但是，我希望有更好的方法来做到这一点（我关注响应性和整体性，我认为这是一个混乱的解决方案）。

.absolute {
position: absolute;
top:800px;
}

.relative {
position: relative;
}

.box {
width: 1920px;
height: 1080px;
}

.red {
background-color: red;
}

.blue {
background-color: blue;
opacity: 0.5;
}

.yellow {
background-color: yellow;
opacity: 0.5;
}

<div class="wrapper relative">
  <div class="relative box red">Go over me thanks</div>
  <div class="absolute box yellow">Absolute positioned element</div>
</div>
<div class="relative box blue">Relative positioned element</div>

Answer 1

请勿使用top，而是使用margin-top。

相对定位元素上的

top: 800px将一个相对于其原始位置向下移动800px，但是后面的元素不会有该偏移并且它们会重叠

使用margin-top，相对定位的元素将真正延伸到其可见的下边界。