Z-Index似乎沒有任何效果

我試圖創建一個邊框，底部有一個三角形出來的框。一個例子可以在這個頁面的評論部分看到：http://www.browserstack.com/Z-Index似乎沒有任何效果

我已經創建了我的三角形圖像覆蓋在框的頂部來創建效果，但我很難讓它坐在頂部的盒子。

這裏是我的HTML代碼：

<div class="box">...</div> 
<ul> 
    <li>...</li> 
</ul>

這裏是我的CSS：

.box { 
    background: none repeat scroll 0 0 #eee; 
    border: 1px solid #aaa; 
    margin: 0; 
    position: relative; 
    z-index: 1; 
} 

ul { 
    margin: 0; 
} 

ul li { 
    position: relative; 
    z-index: 10; 
} 

ul li.active { 
     background: url("testimonial-triangle.png") no-repeat scroll 108px -1px transparent; 
}

正如你所看到的，我已經嘗試設置.box的DIV和UL李有相對定位並給予UL LI一個更大的Z指數，但這似乎沒有做任何事情。

編輯：我也試過把定位和z-索引放在UL而不是LI上，但是這似乎並沒有做任何事情。這裏是我試過的CSS：

.box { 
    background: none repeat scroll 0 0 #eee; 
    border: 1px solid #aaa; 
    margin: 0; 
    position: relative; 
    z-index: 1; 
} 

ul { 
    margin: 0; 
    position: relative; 
    z-index: 10; 
} 

ul li {} 

ul li.active { 
     background: url("testimonial-triangle.png") no-repeat scroll 108px -1px transparent; 
}

來源

2013-01-08 Jordan

z-index與position：absolute; –

不幸的是，我不認爲我可以在這種情況下使用絕對定位。 – Jordan

是的，你可以，如果你試圖把所有的代碼放在正確的層次結構中。 –

這是因爲DOM中的元素不在同一層。您必須將z索引設置爲<UL>元素...而不是<LI>。

來源

2013-01-08 07:15:17

好的，我從李的位置和z-索引，並把它放在UL，但仍然沒有效果。：/ – Jordan

Z-Index似乎沒有任何效果

回答

相關問題