CSS布局疑问：absolute容器内relative与absolute定位的表现差异

我最近做了一个绘制老挝国旗的CSS项目，代码如下：

div.flag {
  width: 900px;
  height: 600px;
  background-color: red;
  position: relative;
}

div.flag > div {
  position: absolute;
  top: 150px;
  width: 900px;
  height: 300px;
  background-color: blue;
}

div.flag > div > div {
  width: 200px;
  height: 200px;
  background-color: white;
  border-radius: 50%;
  position: relative; /* 这里改成absolute就正常 */
  left: 350px;
  top: 50px;
}

p {
  font-size: 5rem;
  color: white;
  text-align: center;
}

div.flag > div > div > p {
  color: black;
}

<div class="flag">
    <p>The Flag</p>
    <div>
      <div>
        <p>of Laos</p>
      </div>
    </div>
</div>

遇到一个布局问题：当圆形元素设为relative定位时，内部的“of Laos”文本默认margin会把圆形向下挤压；但改成absolute定位后，不用调整文本margin，圆形位置就显示正常。

核心原理：文档流的差异 #

1. relative定位元素仍处于正常文档流 #

相对定位的元素只是相对于自身原始位置偏移，但它依然属于正常文档流，占据着文档流中的空间。内部子元素（比如这里的<p>）的默认margin会影响父元素的布局：

• <p>标签默认带有上下margin，当它放在relative定位的圆形div里时，这个margin会“撑开”父div的布局空间。加上给圆形设置的top:50px，两者叠加就导致圆形整体被向下挤压，出现偏移。

2. absolute定位元素脱离正常文档流 #

绝对定位的元素完全脱离了正常文档流，它不再占据文档流中的空间，布局完全由top/left等定位属性控制，且相对于最近的非static定位父元素（这里是蓝色的div）：

• 此时内部<p>的margin只会在圆形div内部生效，不会影响圆形本身的位置——因为圆形已经脱离了文档流，它的位置不受内部子元素布局的“外传”影响，所以即使p有默认margin，圆形也能保持设置的top:50px位置。

补充提示：如果把<p>的margin设为0，即使是relative定位的圆形也不会被挤压，这说明p的默认margin才是触发布局偏移的直接原因，而absolute定位通过脱离文档流规避了这个问题。

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