Z索引不按預期工作

Question

我正在開發一個網頁，我遇到Z索引問題不能按預期工作。我的結構是這樣的：

<div class="mainWrapper"> 
    <div class="overlay"></div> 
    <div class="main"> 
     <div class="content1"> 
      content goes here 
     </div> 
    </div> 
</div> 

在疊加，我有應高於主類的圖片，但在內容級。我試着簡單地添加不同的z索引，但它似乎不工作。我怎麼解決這個問題？這是否因爲overlay-div在其他div之外？

Answer 1

<style> 
.mainWrapper{ position:relative; } 
.overlay{ position:absolute; } 
.main{ position:absolute; } 
.content1{ position:absolute; } 
</style> 
<div class="mainWrapper"> 
    <div class="main"></div> 
    <div class="overlay"></div>   
    <div class="content1"> 
     content goes here 
    </div> 
</div> 

隨着絕對定位，項目將按照它們添加到頁面的順序進行分層。所以在這裏，主要是底層，然後覆蓋頂層，然後是content1。

Answer 2

很難說什麼是沒有看到CSS發生，但...

爲了z-index正常工作，您與工作需要的元素被給予一個明確的position。

一些信息：

http://reference.sitepoint.com/css/z-index
http://reference.sitepoint.com/css/stacking

Answer 3

它與正確的CSS是這樣的：

.overlay { 
    height: 300px; 
    width: 200px; 
    background-color: blue; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 3;} 
.main{ 
    height: 250px; 
    width: 150px; 
    background-color: red; 
    position: absolute; 
    top: 0px; 
    left: 0px;} 
.content1{ 
    height: 200px; 
    width: 100px; 
    background-color: yellow; 
    position: absolute; 
    top: 0px; 
    left: 0px;} 
.mainWrapper{ 
    position: absolute; 
} 

例如HERE