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"> </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 :
- changing the z-index of header_photo_transparent;
- 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/
精彩评论