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

标签 css position css-position z-index

我想了解 z-index 的工作原理。为此，我创建了一个包含五个 div 的简单示例。每个人都是前一个的 child ，除了第一个。我的目标是让第一个 div(所有其他 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 将任何 div 放在前面对自身和负面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>

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

堆叠上下文原则:

每个 parent 都有一套position (static 除外)和一组 z-index (auto 除外)，在该特定 z-index 处创建堆栈上下文对于它所有的 child 。将其想象成 z-index 的无穷大为它的 child 。无穷大完全位于 z-index 处。 parent 的。

让我们考虑引用元素 A .不论z-index在 A 的任何 child 上, 如果你设置 z-index在 B (A 的兄弟)高于A的 z-index，B (以及 B 的任何子级)将在 A 上方呈现最重要的是 A 的 children .

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

如果你想将一个 child 发送到其 parent 之下，设置z-index:auto在 parent 身上和消极的z-index在 child 身上。

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

关于css - 为什么 z-index 不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41385907/

上一篇：css - Bootstrap 卡图像在 Internet Explorer 中失真

下一篇：css - Nginx 无法加载 CSS 和 JS 文件(MIME 类型错误)？

相关文章：

django - 多页 django 表单 - slider 或 FormWizard？

html - 我怎样才能有一个固定的顶部栏，100% 的内容

css - Bootstrap 网格 : Floating columns vertically

css - 在绝对 div 下堆叠 div？

html - smarty tpl 文件没有正确读取 tpl 文件

html - 填充 HTML/CSS 中的额外空间

html - 背景图像未拉伸(stretch)到页面底部 : cannot use background-attachment

css - 让最高的 div 决定一行的高度

html - 如何将粘性导航栏强制为 "overlay"其内容

javascript - 在小屏幕上固定定位的 html div 有什么好的解决方案？

©2024 IT工具网  联系我们