css堆叠div

Question

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

Answer 1

我在里面新增了.image-frame div以下风格为.content带来影子。并检查更新的code。

#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属性所需的位置属性必须，尽量使用类似

postition：相对

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