相对于列表项的绝对定位

Question

我想给列表项目一个背景颜色，边框等。我有以下CSS和HTML。我还将使用该div来相对于li＆gt;添加更多绝对定位元素。格。

ul {
    list-style-image: url('../img/nr_cross.png');
}

li {
    position: relative;
    height: 35px;
}

div {
    position: absolute;
    z-index:-1;
    left:-40px;
    background-color: #dfdfc9;
}

<ul>
<li><p>This</p></li>
<li><p>That</p></li>
<li><p>Other</p></li>
<ul>

问题是，我无法设置列表项的z-index。如果我设置列表项的绝对位置，则无法使用列表项进行布局。我认为这是不可能的，或者也许有更好的方法来做我想做的事。

更新

更新2：

下面的答案在firefox 10，ie8，ie7中不起作用。还修正了上面的问题。

Answer 1

好的，那个模型可以解决问题。我认为。这对你有用吗？

ul {
    list-style-image: url(http://cdn1.iconfinder.com/data/icons/splashyIcons/breadcrumb_separator_arrow_full.png);
    background-color: #dfdfc9;
    margin: 0;
    padding: 0;
}

p {
    position: relative;
    left: 2em;   
}

li {
    border-bottom: 2px dotted black;
    border-top: 1px solid transparent;
}

此处示例：http://jsfiddle.net/dbT2n/1/