CSS：Z-Index Stacking Context

Question

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

＆＃13;

＆＃13;

* {
  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)
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

您可以阅读here：

  

注意：z-index仅适用于定位元素（位置：绝对值，   position：relative，或position：fixed）。

＆＃13;

＆＃13;

* {
  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)
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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)

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

.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

＆＃13;

＆＃13;

* {
  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)
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

你已经把它弄好了，只需将 position：relative; 添加到元素中，这样z-index设置就会生效。

z-index CSS属性指定定位元素及其后代的z顺序。 MDN - CSS z-index定位元素是一个元素，其计算的位置值是相对的，绝对的，固定的或粘性的。 （换句话说，它除了静态之外的任何东西。）MDN - CSS position

＆＃13;

＆＃13;

* {
  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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;