为什么position: fixed不遵循堆叠上下文规则？调整rel与rel1的z-index可改变堆叠位置，但fx元素即便z-index更高也无法置于其上方（除非在DOM中移至rel元素之前），原因何在？

嘿，这个问题其实涉及到CSS里一个很容易踩坑的点——堆叠上下文（Stacking Context）的层级规则，我来给你理清楚：

核心原理：堆叠上下文的层级优先级 #

首先要明确：当元素设置了position: relative/absolute/fixed/sticky且z-index不为auto时，会创建一个独立的堆叠上下文。每个堆叠上下文就像一个“独立的层”，里面的元素只能在这个层内部排序，无法突破到父层的上面，除非父层的层级本身更高。

根堆叠上下文由<html>元素创建，页面上所有元素都嵌套在这个根上下文里。

你的代码里的堆叠关系 #

在你的代码中：

• .rel和.rel1都是position: relative且z-index分别为7和6，所以它们各自创建了自己的堆叠上下文，并且都是根上下文的直接子级。
• .fx是position: fixed且z-index: 10000，按道理它也属于根上下文的子级，z-index远高于.rel的7，应该稳稳显示在最上层才对。

那为什么实际情况相反？

关键原因：fixed元素的堆叠上下文被限制了 #

最可能的情况是：你的.fx元素的某个父元素（比如<body>或者某个包裹容器）意外创建了堆叠上下文，导致.fx的z-index不再相对于根上下文，而是相对于这个父上下文来计算。

哪些属性会触发父元素创建堆叠上下文？常见的有：

• position: relative/absolute/fixed/sticky且z-index不是auto
• transform属性不为none（哪怕是transform: translate(0,0)这种看似没用的属性）
• opacity值小于1
• filter属性不为none
• will-change包含上述任意属性

举个例子：如果你的<body>元素被设置了transform: translate(0,0)，那它就创建了一个堆叠上下文。这时候.fx的z-index:10000只是在<body>的上下文里生效，而.rel的堆叠上下文是根上下文的子级，层级比<body>的上下文更高（因为.rel的z-index:7是相对于根的），所以.fx自然会被.rel覆盖。

为什么调整DOM顺序能解决问题？ #

当你把.fx移到.rel和.rel1前面时，在父堆叠上下文（比如<body>）内部，.fx的z-index:10000远高于后续元素的层级，所以它会成为父上下文里最上层的元素。而如果父上下文的层级和根上下文的子级处于同一优先级时，DOM顺序靠后的元素原本会显示在上面，但调整顺序后.fx提前，自然就能覆盖后续元素了。

快速排查和解决方法 #

你可以按以下步骤排查：

1. 检查.fx的所有父元素，看有没有设置上面提到的会创建堆叠上下文的属性，尤其是transform和opacity，很多时候是不经意间加上的。
2. 如果父元素必须保留这些属性，给父元素设置一个足够高的z-index（比如z-index: 10001），确保它的层级高于.rel的7。
3. 另外，也可以尝试给.fx添加transform: none，强制它的包含块回到视口（根上下文）。

这样应该就能解决fixed元素被relative元素覆盖的问题了！

内容的提问来源于stack exchange，提问作者but-why