html - Z-Index 不适用于子 Div

Question

这是小提琴：http: //jsfiddle.net/gBQqQ/

这是html：

<div id='testtexture'>
<div id='testinside'>
<div style='vertical-align: top;' class='test'></div>
</div>
</div>

和CSS：

.test {
width: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
min-height: 130px;
height:auto;
padding-bottom:50px;
background:blue;
}
#testtexture {
width: 100%;
position: relative;
top: 10px;
}
#testinside {
z-index: 3;
background:red;
position:relative;
}

我不明白为什么会有问题。我希望要么有一些明显的东西我遗漏了，要么存在一个潜在的问题，这意味着我不能让红色 div 超过蓝色 div - 也许是因为它是蓝色 div 的孩子？

Answer 1

一般来说，让一个子 div 出现在它的父级后面并不是最好的主意。通常，您会将子 div 带到父级之外来执行此操作。尽管如此，这是可能的。添加z-index:-1到子 div 并position:relative从父级中删除。

HTML

<div id='testtexture'>
    <div id='testinside'>
        <div class="test"></div>
    </div>
</div>

CSS

.test {
    position: relative;
    z-index: -1;
    width: 50px;
    margin: 0 auto;
    height: auto;
    min-height: 130px;
    padding-bottom: 50px;
    background: blue; }

#testinside { background: red; }

见小提琴：http: //jsfiddle.net/gBQqQ/1/

如果你使用萤火虫，你可以看到div.test它仍然在它的父母后面的正确位置。作为旁注，vertical-align您在 div 上的样式不会做任何事情。