为什么z-index不起作用？

Question

为什么z-index不起作用？

Joã*_*iva 10 css position z-index css-position

我试图了解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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

And*_*hiu 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);}
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

使用Vals的解决方案和您的原始标记,可以通过应用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();

Run Code Online (Sandbox Code Playgroud)

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;}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

更新片段:现在你可以禁用的div的z-index复位才能通过的值切换-1,auto与1每个的<div>分别独立.这可能有助于理解堆叠上下文原则,用我自己的话说明如下.

堆叠上下文原则:

具有集合position(除了静态)和集合z-index(除了自动)之外的每个父节点在其特定的所有子节点上创建堆叠上下文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.

重要说明:在对负数的元素应用变换(尤其是3d)时,z-index并非所有浏览器的行为都相同,您可能会遇到错误和不一致.例如,请参阅此未解决的问题.

归档时间：	8 年，11 月前
查看次数：	1621 次
最近记录：	6 年，8 月前