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