1

假设我有以下 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;
}

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

4

1 回答 1

3

你不能。父母总是在孩子之后，因为z-index价值观是堆叠的。

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

通过设置 a z-indexon .a，您也z-index对所有孩子进行了相同的设置。例如，通过设置z-index:999-- .a，.b现在.c也有相同的索引，使其无用。为了实现这一点，元素不能是另一个元素的父元素或子元素，它们必须是兄弟姐妹才能工作。

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

于 2013-10-18T16:57:21.460 回答