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

假设我有以下HTML代码

HTML

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

你不能。 由于z-index值已堆叠 ，因此父级将始终位于子z-index 。

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

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

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