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/

Answer 2

如果你的意思是：

<div id="a">
    <div id="b">
        <div id="c">
        </div>
    </div>
</div>

然后您可以使用以下方法：

演示： http://jsfiddle.net/ZmvKX/

#a {
    width: 300px; height: 300px; border: 1px solid black; background-color: #000;
    z-index: -1; position: absolute;
}

#b {
    width: 200px; height: 200px; border: 1px solid black; padding: 10px 10px; top: 100px; left: 100px; background-color: #ff0;
    position: relative;
}

#c {
    width: 100px; height: 100px; border: 1px solid black; padding: 10px 10px; top: -50px; left: -50px; background-color: #fff;
    position: absolute; z-index: -2;
}

诀窍是让堆叠上下文正确。

Answer 3

只要元素是页面流的一部分，父元素就不能在它的子元素前面。

你必须使用绝对定位来从页面流中取出元素，以便能够以这种方式堆叠它们。

如何将元素放置在其父级后面但仍位于其祖父母的前面？

3 个答案: