如何将CSS背景图像保留在所有div（面包屑箭头）之上？

Question

我构建了一个小型面包屑示例，克隆了 Google 设计中的一些功能。我一直在寻求让箭头显示在彼此之上，这样就没有任何空白。我尝试过负利润，可能是定位，但我无法让任何事情发挥作用。

下面是 Google 工作示例的链接，以及我当前的演示示例以及面包屑导航当前无法工作的原因的屏幕截图。感谢任何帮助，我也很乐意澄清任何事情！

• Google 的工作示例
• 演示（抱歉，已离线！）

当前错误截图：http://f.cl.ly/items/3H2Z3S3R2v0H3V1r3S3L/breadcrumbs-error.png< /a> （抱歉，这也被删除了！）

Answer 1

Google 实现使用的是 postion:relative; margin-left: -13px 在CSS中，但同时他们使用内联样式为每个链接提供不同的z-index，如下所示：image

使用 javascript 或后端脚本循环访问每个链接，并为每个链接指定较低的 z-index。

Answer 2

试试这个：

.crumbs li {
display: inline;
float: left;
margin-right: -11px;
position: relative;
}

让它们互相贴合。现在添加这个：

.crumbs li:nth-child(1) {
z-index:10;
}
.crumbs li:nth-child(2) {
z-index:9;
} 
.crumbs li:nth-child(3) {
z-index:8;
}

etc

唯一的问题是，nth-child是css3，所以这不利于你的跨浏览器支持。
您还可以向 li 添加类，例如“li.first li.second li.third”等，并给它们递减的 z 索引。然后它应该可以工作

Answer 3

嗯，谷歌使用精灵、相对定位和增量 z 索引。我认为你应该采用相同的技术。他们将 z 索引实现为带有 style="" 属性的内联样式，这在这种情况下似乎是可以接受的，特别是如果稍后使用 PHP 生成它们的话。

Answer 4

另一种（有点粗制滥造的）方法是添加具有相同背景图像的包装器。例如，

<li>
    <div style="float: left; background-image: url('img/bg-crumbs.png');">
        <a href="#">2011 Writing</a>
    </div>
</li>

除了最后一个之外的所有其他。

Answer 5

添加左：-12px；面包屑的 li 元素的样式。只有当它们的位置设置为相对位置时，这才有效；

此外，为了使我的解决方案正常工作，请添加 PHP 或 JavaScript，例如将其添加到每个元素 style="z-index: 10;"。该脚本应自动增加 z-index 属性。如果您要使博客静态等，没有 PHP 或 JavaScript，请手动设置 z-index。