CSS：Z-Index 堆叠上下文 [重复]

Question

今天我有点意外，我有下面的 HTML 标记。 在我的 CSS 中，我将容器设置为 position: fixed; z-index: 3，然后我为 div#1 和 div#3 提供了一个 1 的 z-index 给 div#2 z-index: 2。我的期望是，当我将div#3 向上移动时，它将落后于div#2，但令我最惊讶的是，无论它的z-index 值或div#2 的值如何，它总是保持在它之上，我很困惑为什么会这样是，也许我并不像我想的那样理解堆叠上下文。有什么帮助吗？下面我有css。

* {
  box-sizing: border-box;
}

body, html, .container {
  height: 100%;
  width: 100%;
}

.container {
  position: fixed;
  z-index: 300;
}

#div1, #div2, #div3 {
  opacity: 0.7;
  padding: 10px;
}

#div1 {
  border: 1px dashed #996;
  background-color: #ffc;
  height: 33.333%;
  z-index: 1;
}

#div2 {
  border: 1px dashed #900;
  background-color: #fdd;
  height: 33.333%;
  z-index: 2;
}

#div3 {
  border: 1px dashed #696;
  background-color: #cfc;
  height: 33.333%;
  z-index: 1;
  transform: translateY(-40px)
}

<div class='container'>
  <div id="div1">DIV#1 </div>
  <div id="div2">DIV#2</div>
  <div id="div3">DIV#3</div>
</div>

Answer 1

您的元素至少需要为 position:relative 才能使用 z-index，因为此属性不适用于静态位置（默认值）

如你所见here：

注意：z-index 仅适用于定位元素（位置：绝对， 位置：相对，或位置：固定）。

* {
  box-sizing: border-box;
}

body, html, .container {
  height: 100%;
  width: 100%;
}

.container {
  position: fixed;
  z-index: 300;
}

#div1, #div2, #div3 {
  position:relative;
  opacity: 0.7;
  padding: 10px;
}

#div1 {
  border: 1px dashed #996;
  background-color: #ffc;
  height: 33.333%;
  z-index: 1;
}

#div2 {
  border: 1px dashed #900;
  background-color: #fdd;
  height: 33.333%;
  z-index: 2;
}

#div3 {
  border: 1px dashed #696;
  background-color: #cfc;
  height: 33.333%;
  z-index: 3;
  transform: translateY(-40px)
}

<div class='container'>
  <div id="div1">DIV#1 </div>
  <div id="div2">DIV#2</div>
  <div id="div3">DIV#3</div>
</div>

Answer 2

为了使用z-index 属性创建堆叠上下文，相关元素必须是定位元素。

z-index CSS 属性指定定位元素的 z 顺序 及其后代。

参考：z-index -CSS | MDN

定位元素是声明了position 属性的任何元素，static 除外；这是任何元素的默认定位。

定位元素示例：

1. relative（亲戚）
2. absolute（绝对）
3. fixed（绝对）
4. sticky（粘人）

参考：position -CSS | MDN (Types of positioning)

为了证明这一点，在包含父元素 .container 的嵌套 div 元素上声明 relative 定位，例如：

.container > div {
  position: relative;
}

代码片段演示：

/* Additional */

.container > div {
  position: relative;
}

* {
  box-sizing: border-box;
}

body, html, .container {
  height: 100%;
  width: 100%;
}

.container {
  position: fixed;
}

#div1, #div2, #div3 {
  opacity: 0.7;
  padding: 10px;
}

#div1 {
  border: 1px dashed #996;
  background-color: #ffc;
  height: 33.333%;
  z-index: 1;
}

#div2 {
  border: 1px dashed #900;
  background-color: #fdd;
  height: 33.333%;
  z-index: 2;
}

#div3 {
  border: 1px dashed #696;
  background-color: #cfc;
  height: 33.333%;
  z-index: 1;
  transform: translateY(-40px)
}

<div class="container">
  <div id="div1">DIV#1 </div>
  <div id="div2">DIV#2</div>
  <div id="div3">DIV#3</div>
</div>

更多信息：Understanding CSS z-index - CSS | MDN

Answer 3

将position: relative 添加到 div 中

* {
  box-sizing: border-box;
}

body, html, .container {
  height: 100%;
  width: 100%;
}

.container {
  position: fixed;
  z-index: 300;
}

#div1, #div2, #div3 {
  opacity: 0.7;
  padding: 10px;
}

#div1 {
  border: 1px dashed #996;
  background-color: #ffc;
  height: 33.333%;
  z-index: 1;
  position: relative;
}

#div2 {
  border: 1px dashed #900;
  background-color: #fdd;
  height: 33.333%;
  position: relative;
  z-index: 2;
}

#div3 {
  border: 1px dashed #696;
  background-color: #cfc;
  height: 33.333%;
  z-index: 1;
  position: relative;
  transform: translateY(-40px)
}

<div class='container'>
  <div id="div1">DIV#1 </div>
  <div id="div2">DIV#2</div>
  <div id="div3">DIV#3</div>
</div>

Answer 4

你没看错，只需将 position: relative; 添加到元素中，z-index 设置就会生效。

z-index CSS 属性指定定位元素及其后代的 z 顺序。 MDN - CSS z-index 定位元素是计算位置值是相对、绝对、固定或粘性的元素。 （换句话说，它不是静态的。）MDN - CSS position

* {
  box-sizing: border-box;
}

body, html, .container {
  height: 100%;
  width: 100%;
}

.container {
  position: fixed;
  z-index: 300;
}

#div1, #div2, #div3 {
  opacity: 0.7;
  padding: 10px;
  position: relative;
}

#div1 {
  border: 1px dashed #996;
  background-color: #ffc;
  height: 33.333%;
  z-index: 1;
}

#div2 {
  border: 1px dashed #900;
  background-color: #fdd;
  height: 33.333%;
  z-index: 2;
}

#div3 {
  border: 1px dashed #696;
  background-color: #cfc;
  height: 33.333%;
  z-index: 1;
  transform: translateY(-40px);
}

<div class='container'>
  <div id="div1">DIV#1 </div>
  <div id="div2">DIV#2</div>
  <div id="div3">DIV#3</div>
</div>