css - 如何将 CSS 背景图像保持在所有 div(面包屑箭头)之上?

标签 css positioning z-index background-image breadcrumbs

我已经构建了一个小面包屑示例,从 Google 的设计中克隆了一些功能。我一直在寻找让箭头显示在彼此之上的方法,这样就不会有任何空白。我试过负边距,可能是定位,但我什么都做不了。

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

当前错误截图:http://f.cl.ly/items/3H2Z3S3R2v0H3V1r3S3L/breadcrumbs-error.png (抱歉,这也被删除了!)

最佳答案

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

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

关于css - 如何将 CSS 背景图像保持在所有 div(面包屑箭头)之上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7125656/

相关文章:

css - 如何应用带有字体规则的 css 字体粗细转换

html - 文本按钮前的图像

CSS 高级 Div 定位。自动排列到网格

html - 使用居中 Logo 调整导航栏中的间距

java - 在边框布局中的组件顶部(z 顺序)添加 JComponent

CSS z-index 对输入元素的标签没有影响

jquery - 流体布局,窗口的宽度在移动 (WP) 浏览器上未调整大小

html - 单击某个控件时 CSS 会失真

css - 如何使用 CSS 强制执行绝对定位和行高?

css - Zurb 基金会菜单被切断