覆蓋列表項元素ontop的一個UL的內部圖像的沒有設置UL的背景圖片

Question

http://jsfiddle.net/MBNZ8/32/

我試圖仿效，同時使用的實際圖像設置UL的背景圖像的效果。我需要這樣做，因爲我的要求需要打印ul的圖像，而不需要用戶配置瀏覽器。許多瀏覽器不支持在沒有配置的情況下打印背景圖像。

我也試着在這樣做，但我懷疑我的實現是無效的標記：

<ul> 
    <img height="100" width="30" src="http://ut-images.s3.amazonaws.com/wp-content/uploads/2010/02/The-Brightest-of-Stars.jpg"></img>  
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
</ul> 

ul { 
    height: 100px; 
    width: 30px; 
    list-style: none; 
    margin: 0; 
    padding:0; 
} 

ul img { 
    position: absolute; 
    z-index: 1; 
} 

ul li { 
    z-index: 99; 
    color: red; 
} 

我的列表中的項目目前沒有出現過，即使有較高的z-index圖像。

這樣做的正確方法是什麼？我只是在ul之外聲明圖像並嘗試將ul放在它的上方？

Answer 1

A z-index只適用於定位元素..您可以將postition:relative添加到ul li。

jsFiddle demo

ul li { 
    position:relative; 
    z-index: 99; 
    color: red; 
} 

See MDN