css z-index 不起作用

一个 div 使用默认的定位，另一个使用 fixed 定位。对这两个 div 设置 z-index 会不起作用。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
   <body>
      <div id="over">
       The First Div
      </div>
      <div id="under">
        The Second Div
      </div>
   </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#over {
  width: 600px;
  z-index: 10;
}

#under {
  position: fixed;
  top: 5px;
  width: 420px;
  left: 20px;
  border: 1px solid;
  height: 10%;
  background: #fff;
  z-index: 1;
}

解决方案:

<html> 元素是唯一的堆叠上下文，所以只要遵循上下文内的堆叠规则，就会看到元素是按照以下顺序堆叠的。

  1. 堆叠上下文的根元素(本例中的 <html> 元素) 。
  2. z-index 小于 0 的定位元素（和它们的子元素）。
  3. 没有定位的元素(根据元素在 html 中出现的顺序排序)。
  4. z-index 值为 auto 的元素。
  5. z-index 值大于 0 的定位元素。

所以，可以使用下面这两种方式解决问题：

  1. 设置 #over 的 div position 为 relative，适用上面的第 5 条。

  2. 将 #under div 的 z-index 设置为 -1, 让 #under 的定位出现在非定位元素 #over 的后面。