Z-Index对子Div无效

Question

Here's the fiddle: http://jsfiddle.net/gBQqQ/

Here's the html:

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

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

I do not see why there is an issue. I expect either there is something obvious that I am missing, or there is an underlying issue which means I cannot make the red div go above the blue div- maybe because it is a child of the blue div?

Answer 1

Generally not the best idea to have a child div you want to appear behind it's parent. Usually you would take the child div outside the parent to do this. Nonetheless it is possible. Add z-index:-1 to the child div and remove position:relative from the parent.

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

See fiddle: http://jsfiddle.net/gBQqQ/1/

If you use firebug, you can see div.test is still there in the correct position behind it's parent. As a side note, the styling vertical-align you had on a div won't do anything.