为什么 z-index 不工作？

Question

我正在尝试了解 z-index 的工作原理。为此，我创建了一个包含五个 div 的简单示例。除了第一个，每个都是前一个的 child。我的 objective 是让第一个 div，所有其他 div 的 parent 容器，显示在所有其他容器之上，有效地隐藏它们。

为了实现我的目标，我在所有 div 上设置了 z-index 属性，在 parent div 上设置了一个夸张的值100 以确保它高于所有其他值，但它似乎不起作用。

我阅读了许多关于 z-index 的不同文档，并在 Stack Overflow 上阅读了很多答案。到目前为止，我已经尝试了以下方法：

为所有 div 添加位置属性。
为我要隐藏的 div 添加值为 0.99 的不透明度。
应用位置属性的不同值组合（例如，相对、固定、绝对）。

我仍然没有成功地让 parent div 出现在所有其他 div 之上。我做错了什么？

我用刚才描述的示例创建了一个 JSFiddle：https://jsfiddle.net/y8jfdz7w/15/。

.first {
  position: absolute;
  z-index: 100;
  width: 500px;
  height: 500px;
  background-color: grey;
}
.second {
  position: absolute;
  z-index: 2;
  width: 450px;
  height: 450px;
  top: 25px;
  left: 25px;
  background-color: orange;
  opacity: 0.99;
}
.third {
  position: absolute;
  z-index: 3;
  width: 400px;
  height: 400px;
  top: 25px;
  left: 25px;
  background-color: yellow;
  opacity: 0.99;
}
.fourth {
  position: absolute;
  z-index: 20;
  width: 350px;
  height: 350px;
  top: 25px;
  left: 25px;
  background-color: green;
  opacity: 0.99;
}
.fifth {
  position: absolute;
  z-index: 5;
  width: 300px;
  height: 300px;
  top: 25px;
  left: 25px;
  background-color: pink;
  opacity: 0.99;
}

<div class="first">
  <div class="second">
    <div class="third">
      <div class="fourth">
        <div class="fifth">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

z-index会相对于parent进行计算，所以一旦你增加parent的z-index，所有children都会受到影响含蓄地。 不可能 使用 z-index 可以将 child 隐藏在其 parent 后面。 z-index 主要影响不同 parent 中的兄弟姐妹或 HTML 元素。

Answer 2

实际答案：

根据您想要（视觉上）实现的目标，您要么必须将要隐藏的元素放置在其当前顶层 parent 的同级中，要么必须依靠 visibility 来隐藏它们。

这是 parent 兄弟解决方案：

body{
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.first {
  position: absolute;
  z-index: 1;
  width: 500px;
  height: 500px;
  background-color: grey;
  animation: toggleOpacity 3s infinite;
}
.another-first {
   z-index: 0;
}
.second {
  position: relative;
  z-index: 2;
  width: 450px;
  height: 450px;
  top: 25px;
  left: 25px;
  background-color: orange;
  opacity: 0.99;
}
.third {
  position: absolute;
  z-index: 3;
  width: 400px;
  height: 400px;
  top: 25px;
  left: 25px;
  background-color: yellow;
  opacity: 0.99;
}
.fourth {
  position: absolute;
  z-index: 20;
  width: 350px;
  height: 350px;
  top: 25px;
  left: 25px;
  background-color: green;
  opacity: 0.99;
}
.fifth {
  position: absolute;
  z-index: 5;
  width: 300px;
  height: 300px;
  top: 25px;
  left: 25px;
  background-color: pink;
  opacity: 0.99;
}
@-webkit-keyframes toggleOpacity {
  0%   { -webkit-transform: translateX(-150px); transform: translateX(-150px); }
  50% { -webkit-transform: translateX(150px); transform: translateX(150px); }
  100% {-webkit-transform: translateX(-150px);transform: translateX(-150px);}
}
@-moz-keyframes toggleOpacity {
  0%   { -moz-transform: translateX(-150px); transform: translateX(-150px); }
  50% { -moz-transform: translateX(150px); transform: translateX(150px); }
  100% {-moz-transform: translateX(-150px);transform: translateX(-150px);}
}
@-o-keyframes toggleOpacity {
  0%   { -o-transform: translateX(-150px); transform: translateX(-150px); }
  50% { -o-transform: translateX(150px); transform: translateX(150px); }
  100% {-o-transform: translateX(-150px);transform: translateX(-150px);}
}
@keyframes toggleOpacity {
  0%   { -webkit-transform: translateX(-150px); -moz-transform: translateX(-150px); -o-transform: translateX(-150px); transform: translateX(-150px); }
  50% { -webkit-transform: translateX(150px); -moz-transform: translateX(150px); -o-transform: translateX(150px); transform: translateX(150px); }
  100% {-webkit-transform: translateX(-150px);-moz-transform: translateX(-150px);-o-transform: translateX(-150px);transform: translateX(-150px);}
}

<div class="first"></div>
<div class="another-first">
  <div class="second">
    <div class="third">
      <div class="fourth">
        <div class="fifth">
        </div>
      </div>
    </div>
  </div>
</div>

使用 Vals' 和您的原始标记，可以将 div 中的任何一个放在前面，方法是将 z-index:auto 应用于自身并将否定 z-index 应用于它立即 child。这里的限制是它只能应用于一个级别。您不能用它完全反转堆栈（如果我们禁用 JS 中的重置行并单击级别 2 和 4，则级别 4 高于级别 3 但不高于级别 2）。这是片段，点击任何 div：

window.ziToy = {
  reset: false,
  updateIndexes : function(){
    $('div span').each(function(){
      $(this).text($(this).parent().css('z-index'));
    })
  },
  toggleReset : function () {
    this.reset = !this.reset;
  },
  values:['-1','auto','1']
};

$('div').on('click', function(e){
  e.stopPropagation();

  if (window.ziToy.reset) {
    $('div').css({'z-index':'auto'}); /*reset all divs*/
     $(this).css({'z-index':'auto'});
     $(this).children().css({'z-index':'-1'})
  } else {
    var toy = window.ziToy,
        current = $(this).css('z-index'),        
        next = toy.values.indexOf(current) + 1;
    $(this).css('z-index', toy.values[next % 3])
  };
 
  window.ziToy.updateIndexes();
});

window.ziToy.updateIndexes();

body {
  color: white;
  font-weight: bold;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  padding-top: 30px;
}
@media (max-height: 300px) {
  body{ 
    padding-top: 150px;
  }
}

section {
  width: 0;
  height: 0;
  overflow: visible;
  left: -240px;
  top: -160px;
  position: relative;
  z-index: 1;
}
.toggle {
  position: absolute;
  top:0;
  left: 0;
  padding: 15px;
  color: #999;
  font-weight: 400;
}
div {
  position: absolute;
  height: 150px;
  width: 300px;
  top: 30px;
  left: 30px;
  background-color: grey;
  padding: 5px;
  cursor: pointer;
}

div>div {
  background-color: orange;
}
div>div>div {
  background-color: darkred;
}
div>div>div>div {
  background-color: green;
}
div>div>div>div>div {
  background-color: pink;
}
div>span {float: right;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>

  <div><span></span>
    <div><span></span>
      <div><span></span>
        <div><span></span>
          <div><span></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</section>
<label class="toggle">
  <input onchange="javascript: window.ziToy.toggleReset()" type="checkbox" />Reset all divs on click
</label>

更新的代码段： 现在您可以禁用 divs z-index 重置，以便能够切换 -1、auto & 1 每个 <div> 独立。这可能有助于理解堆叠上下文原则，下面用我自己的话说。

堆叠上下文原则：

每个parent有一个集合position（除了static）和一个集合z-index（除了 auto），在那个特定的 z-index 处创建一个 堆叠上下文 对于所有 children。把它想象成 z-index 的无穷大，因为它的 children。该无穷大完全位于 parent 的 z-index 处。

让我们考虑参考项目A。不管 z-index 在 A 的任何 children 上，如果你在 B（A 的兄弟）上设置 z-index 高于 A 的 z-index、B（以及 B 的任何 children）将呈现在 A 和所有 children 之上A.

当比较来自不同parents的children的z-index时，浏览器将始终根据parents的z-index来决定，而不是child仁。

如果您想在其 parent 下方发送 child，请在 parent 上设置 z-index:auto 并在 [=107 上设置负数 z-index =].

重要说明：在具有负 z-index 的元素上应用变换（尤其是 3d）时，并非所有浏览器的行为都相同，您可能会遇到错误和不一致。例如，请参阅此 un-aswered question。

Answer 3

如另一个答案所述，子元素总是从其父元素继承 z-index！

不过，有一个解决方法。为子元素设置一个负数 z-index，并删除父元素上的负数设置以实现您的目标。

希望对您有所帮助！

Answer 4

您可以使用 z-index 使子元素隐藏在父元素后面。这里有几个方法：

Is it possible to have a child element behind his parent element with z-index
How to get a parent element to appear above child

但一般来说，您不能使用z-index将子元素定位在堆叠上下文的根元素之后。

但是，如果您可以更改 HTML 结构，使 div 成为兄弟姐妹，那么您就大功告成了：

.first {
  z-index: 5;
  width: 500px;
  height: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: grey;
}
.second {
  z-index: 4;
  width: 450px;
  height: 450px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: orange;
}
.third {
  z-index: 3;
  width: 400px;
  height: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: yellow;
}
.fourth {
  z-index: 2;
  width: 350px;
  height: 350px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: green;
}
.fifth {
  z-index: 1;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: pink;
}

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<div class="fifth"></div>

Answer 5

不知道有没有讲过，有很多的回答和评论。

您可以使用 z-index: auto 在父项上和在直接子项上为负值

这里是第一层：

body {
  background-color: bisque;  
}

.first {
  position: absolute;
  z-index: auto;
  width: 500px;
  height: 500px;
  background-color: grey;
  animation: togglePosition 3s infinite;
}
.second {
  position: absolute;
  z-index: -1;
  width: 450px;
  height: 450px;
  top: 25px;
  left: 25px;
  background-color: orange;
  opacity: 0.99;
  animation: togglePosition 3s infinite -1.5s;
}
.third {
  position: absolute;
  z-index: 3;
  width: 400px;
  height: 400px;
  top: 25px;
  left: 25px;
  background-color: yellow;
  opacity: 0.99;
}
.fourth {
  position: absolute;
  z-index: 20;
  width: 350px;
  height: 350px;
  top: 25px;
  left: 25px;
  background-color: green;
  opacity: 0.99;
}
.fifth {
  position: absolute;
  z-index: 5;
  width: 300px;
  height: 300px;
  top: 25px;
  left: 25px;
  background-color: pink;
  opacity: 0.99;
}

@keyframes togglePosition {
  0%   {  left: -150px; }
  50%  {  left: 150px; }
  100% {  left: -150px;}
}

<div class="first">
  <div class="second">
    <div class="third">
      <div class="fourth">
        <div class="fifth">
        </div>
      </div>
    </div>
  </div>
</div>

这里是二楼。在这里，需要去除不透明度。只是为了证明它不是 all 子文件之上的文件，只是相关部分（如果我理解注释 ok）

.first {
  position: absolute;
  z-index: 100;
  width: 500px;
  height: 400px;
  background-color: grey;
}
.second {
  position: absolute;
  z-index: auto;
  width: 450px;
  height: 300px;
  top: 80px;
  left: 25px;
  background-color: orange;
}
.third {
  position: absolute;
  z-index: -1;
  width: 400px;
  height: 400px;
  top: -50px;
  left: 25px;
  background-color: yellow;
  opacity: 0.99;
}
.fourth {
  position: absolute;
  z-index: 20;
  width: 350px;
  height: 350px;
  top: 25px;
  left: 25px;
  background-color: green;
  opacity: 0.99;
}
.fifth {
  position: absolute;
  z-index: 5;
  width: 300px;
  height: 300px;
  top: 25px;
  left: 25px;
  background-color: pink;
  opacity: 0.99;
}

<div class="first">
  <div class="second">
    <div class="third">
      <div class="fourth">
        <div class="fifth">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 6

父元素 z-index 有影响。

如在另一个 post 中所见，此脚本列出了所有父元素的 z-index，对于调试非常有用。

 var el = document.querySelector('your elt'); 
  do {
    var styles = window.getComputedStyle(el);
    console.log(styles.zIndex, el);
  } while(el.parentElement && (el = el.parentElement));

为什么 z-index 不工作？

Why isn't z-index working?

css

position

z-index

css-position