Question

假设我有以下HTML代码

HTML

<div class="a">
  <div class="b">
   <div class="c"></div>
  </div>
</div>

CSS

.a, .b, .c {
  width: 100px;
  height: 100px;
  position: relative;
}

.a {
  background: red;
   z-index: 999;
}

.b {
  background: green;
   margin: 40px;
   z-index: 500;
}

.c {
  background: gray;
  margin: 40px;
  z-index: 100;
}

现在，我希望它完全相反，即最重要的是红色。我尝试使用位置设置为relative的z-index，但它不起作用。这是jsfiddle演示

Answer 1

你做不到。父母将永远在孩子身后，as z-index values are stacked。

根据堆叠上下文描述渲染树在画布上绘制的顺序。堆叠上下文可以包含更多堆栈上下文。从其父堆栈上下文的角度来看，堆叠上下文是原子的;其他堆叠环境中的框可能不在其任何框之间。 - W3 http://www.w3.org/TR/CSS2/visuren.html#z-index

通过在z-index上设置.a，您还可以为所有孩子设置相同的z-index。例如，通过在z-index:999 - .a上设置.b，.c现在也具有相同的索引，将其视为无用。要做到这一点，元素不能是父母，也不能是他人的孩子，他们必须是兄弟姐妹才能发挥作用。

如果他们是兄弟姐妹，那就是它们的样子 - it works!

如何反转嵌套子元素的顺序

1 个答案: