z-index失效问题：#one与#three重叠原因咨询

首先咱们先拆解你给出的代码：

#one { 
  position: relative; 
  top: 35px; 
  z-index: 2; 
}

<div id="one">one</div> 
<div>two</div> 
<div id="three">three</div>

按照CSS堆叠规则，设置了position: relative且z-index: 2的#one，层级应该比默认静态定位的#three更高，理论上#one会覆盖在#three上方，z-index是有效的。你觉得它没生效，大概率是下面这些原因之一：

1. #three是定位元素且堆叠层级更高 #

如果你的实际代码里给#three也设置了position: relative/absolute/fixed/sticky，那情况会分两种：

• 要是#three的z-index值大于2（比如z-index:3），那它自然会覆盖#one；
• 要是#three的z-index是默认的auto，但它在HTML结构里排在#one后面——这里要注意：#one的z-index:2是正值，属于比auto更高的堆叠层级，所以哪怕#three在后面，#one还是应该在上面。除非你写错了#one的z-index值，比如写成了z-index:auto或者z-index:0。

2. 堆叠上下文的“层级隔离”作用 #

这是最容易踩坑的点！如果#one和#three分别属于不同的堆叠上下文，那它们的z-index只在自己的堆叠上下文里生效，不会跨上下文比较。

举个例子：

• 要是#one被包裹在一个设置了z-index:1的定位父元素里，而#three在另一个设置了z-index:2的定位父元素里，那不管#one的z-index多大，都会被#three覆盖——因为父堆叠上下文的层级优先级更高。

哪些属性会创建堆叠上下文？常见的有：

• position为relative/absolute/fixed/sticky且z-index不为auto；
• opacity小于1；
• transform不为none；
• filter不为none；
• flex/grid容器的子元素且z-index不为auto。

你可以检查一下#one和#three的父元素有没有这类属性。

3. 其他CSS样式干扰 #

比如#one的z-index被其他更具体的CSS选择器覆盖了（比如.container #one的权重比#one高，把z-index改成了auto）。你可以打开浏览器的开发者工具，查看#one的computed样式，确认z-index是不是真的被设置成了2。另外，要是#three设置了float属性，它的层级还是低于定位元素的，不会影响#one的z-index生效。

快速排查方案 #

• 先确认#three的定位状态和z-index值，如果不需要定位，就保持默认的static；
• 检查#one和#three的父元素，看看有没有创建堆叠上下文的属性，如果有的话，调整父元素的z-index层级；
• 用浏览器开发者工具的Layers面板（Chrome/Firefox都支持），直观查看两个元素的堆叠层级，一眼就能看出谁在上面。

内容的提问来源于stack exchange，提问作者M Shiraz Baig