css - 为什么z-index不起作用？

我正在尝试了解z-index的工作原理。为了做到这一点，我创建了一个简单的示例，其中包含五个div。每个人都是前一个的 child ，第一个除外。我的目标是使第一个div(所有其他div的父容器)显示在所有其他div的顶部，从而有效地隐藏它们。

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

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

向所有div添加位置属性。

向要隐藏的div中添加值为0.99的不透明度。

应用位置属性的不同值组合(例如，相对，固定，绝对)。

尽管如此，在使父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>

最佳答案

实用答案:

根据您要实现的目标(可视化)，您要么将要隐藏的元素放置在其当前顶级父级的同级对象中，要么必须依靠visibility来隐藏它们。

这是父级同级解决方案:

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'solution和您的原始标记，可以通过将z-index:auto应用于自身并将其负z-index应用于其直接子代来将任何div放在前面。这里的限制是它只能应用于一个级别。您无法使用它完全反转堆栈(如果我们禁用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>的值。这可能有助于理解堆叠上下文原则，以我自己的话在下面阐述。

堆栈上下文原则:

具有一组position(除静态以外)和一组z-index(除 auto 以外)的每个父级在该特定z-index上为其所有子级创建一个堆栈上下文。将其想象成它的子级z-index的无穷大。该无穷大完全放在父级的z-index处。

让我们考虑参考项A。不管z-index的任何子级上的A是什么，如果将z-index(B的同级)上的A设置为高于A的z-index，则B(以及B的所有子级)将在A上方和A的所有子级之上呈现。

当比较来自不同 parent 的 child 的z-index时，浏览器将始终基于 parent (而不是 child )的z-index做出决定。

如果要在其父级以下发送子级，请在父级上设置z-index:auto，并在该子级上设置否定的z-index。

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