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

【问题标题】：How to Keep CSS Background Image on top of all divs(breadcrumb arrows)?如何将 CSS 背景图像保持在所有 div（面包屑箭头）之上？
【发布时间】：2011-10-30 20:07:33
【问题描述】：

我构建了一个小型面包屑示例，从 Google 的设计中克隆了一些功能。我一直在寻找让箭头显示在彼此之上，因此没有任何空白。我尝试过负边距，可能是定位，但我无法让任何工作。

以下是指向 Google 工作示例的链接，以及我当前的演示示例以及为什么面包屑当前无法正常工作的屏幕截图。感谢任何帮助，我也很乐意澄清任何事情！

Google's working example
演示（已离线抱歉！）

当前bug截图：http://f.cl.ly/items/3H2Z3S3R2v0H3V1r3S3L/breadcrumbs-error.png（抱歉这个也被删除了！）

【问题讨论】：

您可以接受使用 JavaScript/jQuery 的解决方案吗？
您需要对每个li 应用不同的z-index，第一个具有最高索引，并在随后的每个li 上降低z-index。你是如何生成面包屑的？是否可以对列表中的每个 li 应用不同的 z-index？
注意：Google 的背景图片受版权保护。

标签： css positioning z-index background-image breadcrumbs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

使用 javascript 或您的后端脚本循环遍历每个链接，并为每个链接提供较低的 z-index。

【讨论】：

你是一个救生员，非常感谢！！我可能会使用 jQuery，但是为每个层添加不同的类对于这个实现来说似乎更合理。

【解决方案3】：

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

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

除了最后一个。

【讨论】：

【解决方案4】：

好吧，Google 使用精灵、相对定位和增量 z 索引。我认为您应该使用相同的技术。他们将 z-indexes 实现为带有style="" 属性的内联样式，这在这种情况下似乎是可以接受的，尤其是如果它们稍后是使用 PHP 生成的。

【讨论】：

【解决方案5】：

试试这个：

.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;
}

等

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

【讨论】：

是的，这是个好人。我想我会使用 .first、.second 等。它会使开发过程变得更加容易。