How can I display this text with z-index?

I have this code :

<div class="header_photo">
    <div class="header_inside">
        <div class="header_text">
            Text
        </div>
    </div>

    <div class="header_photo_transparent">&nbsp;</div>
</div>

.header_inside
{
    top: 0px; 
    left: 0px; 
    display: block; 
    width: 975px; 
    background: none repeat scroll 0% 0% transparent; 
    z-index: 4; 
    position: absolute;
}

.header_text
{
    position:absolute;
    bottom:15px;
    width:500px;
    z-index:201;     
    left:370px;
    font-size:12px;
    line-height:13px;
}

.header_photo_transparent
{
    position:absolute;
    bottom:0;
    left:0;
    width:960px;
    height:64px;
    background-color: red;
    z-index:100;
}

and I'd like to display the string Text over the red background, without :

1. changing the z-index of header_photo_transparent;
2. without removing position:absolute from header_inside

In fact I don't see the string Text.

Why t开发者_JS百科his behaviour? And how can I fix this trouble?

---

Z-index is not at fault, just remove the z-index and use the positioning. The positioning is out, not the layers.

http://jsfiddle.net/zaSKZ/1/