了解z-index：此元素如何显示在其父级兄弟的前面？ [英] Understanding z-index: How does this element appear in front of its parent's sibling?

问题描述

当我从 .wrapperRed 中移除 z-index 时，为什么红色div位于绿色div的前面？

感觉像 z-index 沿着链条继承。

如果我将绿色div的 z-index 改为6，即使在删除了第一句中描述的行之后，它仍然保留在红色的前面。

  .wrapperRed {height：200px; width：200px; position：absolute; z-index：1; / *为什么红色div在绿色前面，如果这个z-index被删除？ * /}。red {position：absolute;高度：100％; width：100％; background-color：red; z-index：5;}。green {height：200px; width：200px; background-color：green; position：absolute; top：100px; left：100px; z-index：1;}  

 < div class = wrapperRed> < div class =red>< / div>< / div>< div class =green>< / div>   

解决方案

当您移除 z-index 从 .wrapperRed ，元素默认为 z-index：auto 。

在这种情况下， .red 和 .green 当 z-index 是 auto （参考）。

学习更多关于 z-index 和堆叠上下文的信息： CSS基础知识 z-index 属性

Why is the red div in front of the green div when I remove z-index from .wrapperRed?

It feels like z-index is inherited up the chain.

If I change the z-index of the green div to 6, it stays in front of the red one even after removing the line described in the first sentence.

.wrapperRed {
  height: 200px;
  width: 200px;
  position: absolute;
  z-index: 1; /* Why is the red div in front of the green one, if this z-index is deleted? */
}

.red {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: red;
  z-index: 5;
}

.green {
  height: 200px;
  width: 200px;
  background-color: green;
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 1;
}

<div class="wrapperRed">
  <div class="red"></div>
</div>
<div class="green"></div>

解决方案

When you remove z-index from .wrapperRed, the element defaults to z-index: auto.

In this case, both .red and .green participate in the same stacking context because positioned elements do not create a stacking context when z-index is auto (reference).

Learn more about z-index and stacking contexts here: Basics of the CSS z-index property

这篇关于了解z-index：此元素如何显示在其父级兄弟的前面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！