如何反转嵌套子元素的顺序 [英] How to reverse the order of nested child elements

问题描述

假设我有以下HTML代码

Suppose I have the following HTML Code

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

现在，我想要它完全相反。
我尝试使用位置设置为相对的z-index，但它不工作。
以下是 jsfiddle 演示

Now, i want it to be exactly opposite i.e, red on top of all. I tried using z-index with position set to relative but it doesn't work. Here's the jsfiddle demo

推荐答案

你不能。父级将始终在子级之后， 为 z-index 值已堆叠 。

You can't. The parent will always be behind the children, as z-index values are stacked.

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

通过设置 z-index .a ，您还将在所有子项上设置相同的 z-index 。例如，通过在 .a - 上设置 z-index：999 / code>和 .c 现在也有相同的索引，无法使用它。要实现这一点，元素不能是父的，也不能是另一个的孩子，他们必须是兄弟姐妹才能工作。

By setting a z-index on .a, you are also setting the same z-index on all the children. For instance, by setting z-index:999 on .a -- .b, and .c now also have the same indexes, rending it useless. To achieve this, the elements cannot be a parent nor a child of another, they would have to be siblings for this to work.

这是什么样子if他们是兄弟姐妹 - 有效！

Here is what it would look like if they are siblings - it works!

这篇关于如何反转嵌套子元素的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！