相对于列表项的绝对定位答案

【问题标题】：Absolute positioning relative to list items相对于列表项的绝对定位
【发布时间】：2012-02-21 10:46:08
【问题描述】：

我想为列表项设置背景颜色、边框等。我有以下 CSS 和 HTML。我还将使用该 div 添加更多相对于 li > div 的绝对定位元素。

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 中不起作用。上面还有固定的问题。

【问题讨论】：

我错过了你提问的部分。
你可以制作一个你想要的模型吗？或者也许我只是反应慢，别人会知道你在说什么
是的，我是 GCC 我不明白你想要做什么
我不明白您为什么需要所有这些额外的<div>-s 和<p>-s？你为什么不按照你想要的方式设计你的<li>？
我想在 list-style-image 下面给列表项一个背景色。

标签： css

【解决方案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/

【讨论】：

我添加了一个模型。我想在 list-item-image 后面有背景色，在底部有一个边框。它不一定是 div，尽管 div 会在其中，因为我将在每个列表项、扩展器、自定义工具提示中包含许多元素，相对于 li > div。
@madphp 是的，它是小箭头 =/
在firefox、ie8、ie7中不工作。适用于 chrome、ie9 和 safari。
@madphp 很有趣。好吧，如果你弄清楚了，请告诉我。
你有没有得到那些修正人们语法和一般愤世嫉俗的观点，因为它不能用来回答 css 问题。