Css 背景图像伪z索引

我有一个带有多个背景图像的

。 问题是

s有一个

边框底部

，位于一个背景图像上方（在本例中为箭头）。我希望箭头是底部边界上的一层。您可以在此处看到重叠：

这是一个复制

的JSFIDLE。 而是现场直播

我知道不可能为背景图像设置z索引，但是有没有一个技巧（或者更好的方法，一个干净的方法，来避免这种重叠，并将边框底部设置为一层之下，或者将背景图像设置为一层之上）

---

编辑：设置

.box ul li{位置：相对；z-index:-1}

使箭头位于

边框底部上方

，但链接不再可单击：：（

以下可能是一个选项

对于HTML：

<div style="list-style-type:none;width:400px" class="box">
    <ul id="lastfm">
        <li>...</li>
        ...
        <li class="overlay"></li>
    </ul>
</div>

确保

后台位置的语法绝对正确，否则Safari将无法理解。Firefox更宽容一些

演示位于：
您需要将背景图像放置在一个单独的容器中，并将其绝对放置在列表项上…这需要一些工作，但可行。这样的解决方案在您的上下文中是否有效？嗯……这不是仅在特定分辨率下有效吗？它适用于任何分辨率。可能需要额外的标记来放置图像，但不可行就是这样。我在前面看到一个答案，使用的是
z-index:-1
，结果怎么样了？没有。（添加了关于这个问题的信息。我可以请你修改一下你的解决方案吗…？：）正如你所见，我在尝试了我的解决方案，蓝色箭头现在位于边框上方，但每当你将鼠标移到保存图像的矩形上时，你就无法单击链接。这可能适用，也可能不适用，但至少你可以看一看。
.box ul#lastfm {
    padding-right: 75px;
    position: relative; /* So that the absolute positioning based on this block... */
    margin-left: 0;
    list-style: square outside none;
}

.overlay {
    outline: 1px dashed blue; /* for demo only */
    position: absolute;
    z-index: 1; /* to make sure it is in front of list items... */
    bottom: 0;
    right: 0;
    height: 70px; /* will depend on your images... */
    width: 110px;
    background-attachment: scroll, scroll;
    background-clip: border-box, border-box;
    background-color: transparent;
    background-image: ...
    background-origin: padding-box, padding-box;

    background-position: right bottom, right bottom, left 0px;
    /* Make sure syntax is correct, otherwise Safari gets confused... */

    background-repeat: no-repeat, no-repeat;
    background-size: auto auto, 70px auto, auto auto;
}