一个元素如何定位在其父级后面但仍位于其祖级父级前面？

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

超文本标记语言

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

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