css - 一个元素如何定位在其父元素之后但仍在其祖父元素之前？

Question

我将三个元素堆叠在一起。现在，我希望将最里面的元素放在其父元素的后面，但仍在其祖父元素的前面。我尝试了 z-index 设置的不同变体，但没有成功。

根据我对 z-index 的理解，代码应该是:

<div style="width: 400px; height: 400px; background-color: purple; position: relative; z-index: 1;">
    <div style="width: 200px; height: 200px; background-color: blue; position: relative; z-index: 1;">
        <div style="width: 100px; height: 100px; background-color: green; position: relative; z-index: -1;"></div>
    </div>
</div>

除了它没有。

有什么解决办法吗？

Answer 1

如果您从第二个 div 中删除相对位置，它将起作用

CSS

.div1{
  width: 400px; 
  height: 400px; 
  background-color: purple; 
  position: relative;
  z-index: 1;
}

.div2{
  width: 200px; 
  height: 200px; 
  background-color: blue;  
  z-index: 1;
}

.div3{
  width: 100px; 
  height: 100px; 
  background-color: green; 
  position: relative;
  z-index: -1;
  left:150px;
}

HTML

<div class='div1'>
    <div class='div2'>
        <div class='div3'></div>
    </div>
</div>

示例:http://jsfiddle.net/MFULL/90/