Question

我有this代码：

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

我想在红色背景上显示字符串Text，而不是：

更改header_photo_transparent的z-index;
不删除位置：绝对来自header_inside

实际上我没有看到字符串Text。

为什么会这样？我该如何解决这个问题？

Answer 1

Z-index没有错，只需删除z-index并使用定位。定位已经结束，而不是层层。

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

如何使用z-index显示此文本？

1 个答案: