html - 在 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

z-index 仅适用于定位元素。您可以将 postition:relative 添加到 ul li。

jsFiddle demo

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

See MDN