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

How to reverse the order of nested child elements

本文关键字：顺序 元素 何反转 嵌套      更新时间：2023-09-26

假设我有以下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 演示

你不能。父项将始终位于子项后面，因为z-index值是堆叠的。

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

通过在 .a 上设置z-index，您还将对所有子项设置相同的z-index。例如，通过在.a上设置z-index:999 -- .b ，.c现在也有相同的索引，使其无用。为此，元素不能是另一个人的父母或孩子，他们必须是兄弟姐妹才能正常工作。

如果他们是兄弟姐妹，这就是它的样子 - 它有效！

相关文章：