为什么给元素设置position: relative会隐藏其前面的浮动兄弟元素？

该现象是CSS标准定义的同堆叠上下文默认堆叠顺序导致的标准行为，和具体浏览器版本无关。

同属一个堆叠上下文、未显式设置z-index时，元素堆叠顺序从下到上规则如下： #

• 普通流内position为static的非定位块级元素，按DOM书写顺序从下到上排列
• 非定位的浮动元素
• 普通流内非定位的行内/行内块元素
• 所有position属性不为static的定位元素（包含relative/absolute/fixed/sticky，哪怕z-index值为auto），按DOM书写顺序从下到上排列

对应代码场景的具体分析 #

你提供的两组结构中，.outer容器未触发堆叠上下文创建规则，因此两个子元素都处于根元素的堆叠上下文内：

1. 第一组的第二个兄弟元素#relative设置了position: relative，属于上述规则中堆叠层级最高的定位元素分类，层级高于前面的浮动元素；且默认块级元素宽度占满父容器，因此会完全覆盖住前面的浮动X，视觉上表现为浮动元素被隐藏。
2. 第二组的第二个兄弟元素#notRelative是默认static定位的块级元素，属于上述规则中堆叠层级最低的非定位块级元素分类，层级低于浮动元素，因此浮动的X会显示在它上方，不会被遮挡。

你之前的认知偏差点：position: relative首先会改变元素自身的堆叠层级，并不是仅影响子元素的堆叠顺序。只有当position: relative同时设置了非auto的z-index值时，才会创建新的独立堆叠上下文，仅在此时会专门控制子元素的堆叠逻辑。

问题复现核心代码 #

<html>
  <body>
    <div class="outer">
      <span class="floated">X</span>
            <div id="relative">Y</div>
    </div>
    <hr />
    <div class="outer">
      <span class="floated">X</span>
      <div id="notRelative">Y</div>
    </div>
  </body>
</html>

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