如何让CSS relative定位元素的内外边距在偏移后的位置生效

常规position: relative的核心规则是：元素在文档流中的原始占位固定不变，top/right/bottom/left仅控制视觉层面的偏移，因此margin、padding都是绑定在原始占位位置生效，这就是你当前示例中粉色div的margin-bottom没有正常作用于第三个div的原因：粉色div视觉向下偏移了40px，但margin-bottom还是作用在它的原始位置，最终两个div的视觉间距只有50px - 40px = 10px，不符合预期。

以下是两种可行的实现方案：

• 方案1：用margin-top替代top偏移（改动最小，最推荐）
  如果没有必须用top做偏移的强制需求，直接将top:40px替换为margin-top:40px即可，你可以保留position:relative属性来满足子元素定位、z-index设置等其他需求。修改后的粉色div代码如下：

<div style="position:relative; background: pink; margin-top: 40px; margin-bottom: 50px;">Second div relative position</div>

该方案的原理是margin会直接改变元素在文档流中的占位位置，后续元素的布局会基于偏移后的占位计算，margin-bottom自然就能正常作用于第三个div。

• 方案2：外层包裹占位容器（适用于必须用top/left做偏移的场景）
  如果你需要保留top做偏移（比如要实现位置动画、基于原始位置的偏移计算等场景），可以给粉色div增加一个无样式的父级容器，由父容器承担文档流占位和margin-bottom的作用：

<!-- 第一段内容 -->
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. ...省略原有内容...</div>
<!-- 外层占位容器 -->
<div style="margin-bottom: 50px;">
  <div style="position:relative; background: pink; top: 40px;">Second div relative position</div>
</div>
<!-- 第三段内容 -->
<div>Third div. Third div.Third div....省略原有内容...</div>

该方案里外层容器的高度和粉色div保持一致，它的margin-bottom会正常推开第三个div，粉色div在容器内部的相对偏移不会影响外层文档流布局，同样可以实现需求。

内容的提问来源于stack exchange，提问作者Piotr Walczak