逻辑地下降z-index

Question

<div id="crumbs">

<a href="#" style="z-index: 4;">Workplace Standards</a> &#62;
<a href="#" style="z-index: 3;">Resources</a> &#62;
<a href="#" style="z-index: 2;">Guides</a> &#62;
<a href="#" style="z-index: 1;">Public holidays</a>

</div>

我有一个简单的痕迹导航栏，JQuery可以为div中的每个链接分配一个降序的z索引，就像上面的代码一样吗？目前打印的链接没有z-index，因此它们看起来很糟糕。

我希望它看起来如何：

它目前的样子：

CSS

CSS中唯一真正的关键角色是位置和边距左边，但这里完全是：）

#crumbs a {
    display: inline-block;
    position: relative;
    padding: .5em 1em;
    background: #e3e3e3;
    border: 1px solid #c9c9c9;
    box-shadow: inset 0px 1px 0px #f6f6f6;
    border-radius: 1em 2em 2em 1em;
    margin-left: -.6em;
}

Answer 1

你可以这样做：

$($('#crumbs > a').get().reverse()).css('z-index', function(index) {
    return index+1;
});

或者，如果您更愿意使用.each()循环播放：

$($('#crumbs > a').get().reverse()).each(function(index) {
    $(this).css('z-index', index+1);
});​​

请注意，要实现此目的，您需要确保a元素具有position: relative。

Answer 2

没有定位z-index几乎没用

<div id="crumbs">

    <a href="#" style="position:relative;z-index: 4;">Workplace Standards</a> &#62;
    <a href="#" style="position:relative;z-index: 3;">Resources</a> &#62;
    <a href="#" style="position:relative;z-index: 2;">Guides</a> &#62;
    <a href="#" style="position:relative;z-index: 1;">Public holidays</a>

</div>

Example

MDN

Answer 3

状态更新：如果 CSS 且 JavaScript 已停用，那么breadcrumbs的正确后备将会发生。

参考： jsFiddle

启用CSS和JavaScript的屏幕截图：

禁用CSS和JavaScript的屏幕截图：

额外：如果CSS3版本可以接受，我会受到启发，在此SO Answer制作一个带箭头的版本。

---

编辑：

jsFiddle以Simon Sarris替换式。

{{3}}