z-index兄弟绝对元素

我想知道为什么在这个例子中的蓝色div不总是在顶部？即怎么来的红格＃2是蓝子的顶部1z-index兄弟绝对元素

body { 
 
    padding: 30px; 
 
} 
 
.red1 { 
 
    position: absolute; 
 
    z-index: 1; 
 
    width: 400px; 
 
    height: 200px; 
 
    background: red; 
 
} 
 
.red2 { 
 
    position: absolute; 
 
    z-index: 1; 
 
    width: 400px; 
 
    height: 200px; 
 
    top: 250px; 
 
    background: red; 
 
} 
 
.blue { 
 
    z-index: 9; 
 
    padding: 10px; 
 
    text-align: center; 
 
    color: white; 
 
    text-transform: uppercase; 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 100px; 
 
    width: 150px; 
 
    height: 130px; 
 
    background: blue; 
 
}

<div class="red1"> 
 
    <div class="blue"> 
 
    blue child 1 
 
    </div> 
 
</div> 
 
<div class="red2"> 
 
    <div class="blue"> 
 
    blue child 2 
 
    </div> 
 
</div>

FIDDLE

来源

2016-07-26 Kirk Ross

我期待在第一红格蓝儿是红格的顶部2.两个蓝色的div的z 9的指数和两个红色的Z指数为1，那么红色如何能在蓝色之上？ –

因为.red1和.red2形式不同的堆叠内容。

一个堆叠上下文中的元素不会与另一个堆叠上下文中的元素一起参与。

如果你给.red2 a z-index: -1，你会得到你期望的行为（demo）。

那是因为.red1和.red2都是绝对定位没有定位的祖先。这意味着根元素是他们的直接祖先，并且the root element forms a stacking context。

更多细节在这里：

来源

2016-07-26 17:28:04

z-index兄弟绝对元素

回答

相关问题