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 の子なのでしょうか?