css - css堆叠div

Question

我想堆叠 div 以使用和图像显示顶部和底部淡入淡出。

外部 div（“旋转器”）有一个背景图像，该图像在顶部和底部具有渐变，在中间是透明的。在中间，我想显示内容或图像，并在顶部放置外部 div 背景图像，因此您始终会看到顶部和底部的渐变以及后面的内容/图像。

谢谢你的帮助。现在背景图像总是被内部 div 内容/图像覆盖。

这是我的代码：

<div id="rotator">
<div class="content">this is my content</div>
</div>

#rotator 
{
    width:990px;
    height:300px;
    background: url('../Images/TIBC_Base/featured_area.png') repeat-x;
z-index:99;

}
#rotator .content
{
    width:990px;
    height:300px;
z-index:-1;
}

Answer 1

我在下面的样式中添加了新.image-frame的 div来带来阴影。并检查更新的代码。#rotator.content

#rotator 
{
    width:990px;
    height:300px;
    position:relative;
}
.image-frame{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background: url('http://i47.tinypic.com/2lctevc.png') repeat-x;
}

Answer 2

当您使用 z-index 属性时，必须使用position属性，尝试使用类似的东西

职位：相对

<div id="rotator">
<div class="content">this is my content</div>
</div>

    #rotator 
    {
        width:990px;
        height:300px;
        background: url('../Images/TIBC_Base/featured_area.png') repeat-x;
    position:relative;
    z-index:99;


    }

    #rotator .content
    {
        width:990px;
        height:300px;
    position:relative;
    z-index:-1;
    }