css堆叠div

我正在绑定堆栈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;
}

这是我的内容
#旋转器
{
宽度：990px；
高度：300px；
背景：url（'../Images/TIBC_Base/featured_area.png'）repeat-x；
z指数：99；
}
#旋转器内容
{
宽度：990px；
高度：300px；
z指数：-1；
}

在使用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;
    }

这是我的内容
#旋转器
{
宽度：990px；
高度：300px；
背景：url（'../Images/TIBC_Base/featured_area.png'）repeat-x；
位置：相对位置；
z指数：99；
}
#旋转器内容
{
宽度：990px；
高度：300px；
位置：相对位置；
z指数：-1；
}

我在

#旋转器

中添加了新的

.image frame

div，并使用以下样式启用阴影

.content

。并检查更新的

---

这是一个附带背景图像的JSFIDLE。谢谢senthilbp，但这似乎没有奏效。内容仍在背景上方。对于背景图像：

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