为什么z-index不起作用？

问题描述 投票：10回答：6

我试图了解z-index的工作原理。为了做到这一点，我创建了一个由五个div组成的简单示例。每个人都是前一个孩子，除了第一个孩子。我的目标是使第一个div（所有其他div的父容器）显示在所有其他div之上，有效地隐藏它们。

为了实现我的目标，我已经在所有div和父div上放置了z-index属性我放了一个夸大的值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>
css position css-position z-index
6个回答
8
投票

实际答案：

根据您想要实现的目标（视觉上），您必须将要隐藏的元素放置在当前顶级父级的兄弟中，或者您必须依赖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 reset，以便能够独立地为每个-1s切换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的所有孩子。

当比较来自不同父母的孩子的z-index时，浏览器将始终根据父母而不是孩子的z-index来决定。

如果您想在其父级下面发送一个孩子，请在父级上设置z-index:auto，在子级上设置负z-index。

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

4
投票

你可以通过z-index破解你的方式，使子元素消失在父元素后面。以下是一些方法：

但一般来说，您不能使用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>
3
投票

z-index将相对于父母计算，所以一旦你增加了父母的z-index，所有的孩子都会受到影响。使用z-index，儿童无法隐藏在其父母身后。 z-index主要影响不同父母的兄弟姐妹或HTML元素。

2
投票

我不确定这是否已经说过，有很多答案和评论。

您可以使用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>

在这里的第二级。在这里，需要删除不透明度。只是为了证明它不是所有高于孩子的文件，只是相关部分（如果我理解评论确定）

.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>
1
投票

子元素总是从父母那里继承z-index，正如另一个答案所提到的那样！

但是，有一个解决方法..为子元素设置负z-index，并删除父元素上的一个集合以实现您的目标。

希望这可以帮助！

0
投票

父元素z-index有效。

正如另一篇文章中所见，这个脚本列出了所有父元素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));
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.