为何Position Fixed子元素会受Position Relative父容器的Z-index限制？

嘿，这绝对是CSS定位里一个容易踩的隐蔽坑！咱们把核心逻辑掰碎了说：

默认情况下，position: fixed的元素是相对于浏览器视口独立定位的，本该不受普通文档流里元素的影响，但这里有个关键例外——如果这个fixed元素嵌套在一个设置了position: relative的容器里，它会被父容器的堆叠上下文“绑定”。

简单来说，这个fixed子元素的z-index规则不再是和整个页面的元素对比，而是要遵循父容器的堆叠层级。如果父容器的同级元素同样是position: relative，并且拥有更高的z-index值，那么这个同级元素就会直接覆盖掉这个fixed子元素。

给你看个直观的代码示例：

.container1 {
  position: relative;
  z-index: 2;
  height: 200px;
  width: 100%;
  background-color: lightblue;
}

.fixed-child {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 150px;
  height: 150px;
  background-color: coral;
}

.container2 {
  position: relative;
  z-index: 3;
  height: 200px;
  width: 100%;
  background-color: lightgreen;
  margin-top: 50px;
}

<div class="container1">
  <div class="fixed-child">我是fixed元素，但会被container2覆盖</div>
</div>
<div class="container2">我是同级的relative容器，z-index更高</div>

在这个例子里，.fixed-child虽然是fixed定位，但因为它的父容器.container1创建了堆叠上下文（relative+z-index），所以它的堆叠层级被限制在.container1的层级里。而.container2的z-index是3，比.container1的2更高，所以.container2会直接盖住这个fixed子元素，哪怕fixed本该是“悬浮”在视口上的。

下次遇到fixed元素被莫名覆盖的情况，先检查它的父级是不是创建了堆叠上下文哦！

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