为何position relative能使DOM节点覆盖position fixed元素？模态框层级疑问

这个问题本质是**CSS堆叠上下文（Stacking Context）和堆叠顺序（Stacking Order）**在起作用，我结合你的代码一步步给你掰明白：

先拆解你的场景 #

你的.main容器用了position: fixed，这会让它创建一个独立的堆叠上下文——简单说就是容器里的元素都在这个“独立空间”里比拼谁显示在上面。

容器里的三个元素状态：

• .background：position: absolute，属于非static定位元素
• .norelative：普通块级元素，没有设置定位，属于普通流元素
• .content：加了position: relative，也变成了非static定位元素

同一堆叠上下文里的层级规则 #

在同一个堆叠上下文里，元素的显示层级是有固定顺序的（从低到高，层级高的会盖住层级低的）：

1. 堆叠上下文根元素的背景和边框
2. 带负z-index的定位元素
3. 非定位的块级元素（比如你的.norelative）
4. 非定位的行内元素
5. 浮动元素
6. 非定位的inline-block元素
7. z-index为auto或0的定位元素（比如你的.background和.content）

划重点：定位元素的层级比普通流的非定位元素高很多。所以哪怕你的.norelative在DOM里写在.background后面，它的层级还是低于.background，自然会被背景色盖住。

为什么position: relative能解决问题？ #

当你给.content加上position: relative后，它就从普通流元素变成了定位元素，和.background站到了同一个堆叠层级（上面的第7层）。

在同一堆叠层级里，CSS遵循**“后来居上”**的规则：DOM结构里后出现的元素，会显示在前面的元素上方。因为你的.content在DOM里是写在.background之后的，所以它就能覆盖住.background，不会被背景色遮挡了。

而.norelative没加定位，还是普通流元素，层级不够，所以被背景压住了。

补个小知识点 #

其实你也可以尝试用z-index来调整，但要注意：z-index只对定位元素生效。所以哪怕给.norelative加z-index: 999也没用，必须先让它变成定位元素（比如加position: relative），z-index才会起作用——这也侧面印证了定位元素在堆叠规则里的特殊性。

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