【CSS】问题：为什么我的z-index不起作用

这篇文章也可以在我的博客中阅读。

问题描述

我设置了z-index: 99999，但是它不起作用涅。

问题原因

1. 当元素position为static（默认值）时，z-index将被忽略。
2. z-index需要各元素位于同一堆栈上下文（Stacking Context）。而且z-index是原子性的，也就是在“子”上下文中的设置并不会对“父”上下文有任何影响。

如果已经设置了position，那出问题大概率是因为上下文不一。

解决办法

设置Position

若没设置z-index的元素position，设置为relative

统一堆栈上下文

若是在多层嵌套的环境下，非常容易不经意之间创建堆栈上下文，而我们要做的则是确保元素位于同一上下文。换句话说，就是不能让其中的容器元素产生堆栈上下文。

废话！但是具体要怎么做啊？

手动判断

首先需要知道，何时会产生堆栈上下文，在Mozilla文档中有详细的描述，此处不展开讨论。

主要的做法为：

• container不能是根元素
• 对每级container，确保不产生堆栈上下文
  • 重点关注：position、z-index、opacity和isolation这几个经常导致产生上下文的属性

以下是一个跨层级设置z-index的例子：

#overlapper, #child1, #child2 {
  position: relative;
  padding: 30px;
  height: 20px;
}
#overlapper {
  z-index: 3;
  background: red;
  top: 60px;
  margin-left: 20px;
}
#container {
  margin-top: -40px;
}
#child1 {
  z-index: 2;
  background: green;
  top: -40px;
}
#child2 {
  z-index: 4;
  background: blue;
  margin-left: 40px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div id="overlapper">Overlapperdiv>
<div id="container">
    <div id="child1">Child 1div>
    <div id="child2">Child 2div>
div>
1
2
3
4
5

插件辅助

然而并没有什么暖用。
我盯着这坨屎山看了30分钟，没发现哪里不妥，然后萌生偷鸡念头：
这种东西就应该用计算机来处理啊！！！

于是我找到了这个在Chrome F12控制台中显示z-index的拓展程序

然后……很好，2分钟就找到原因了。
干这种事还是不要企图用人的猪脑代替计算机了。

参考资料

z-index not working with fixed positioning
Z-Index with different parents