逻辑降序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>

我有一个简单的breadcrumb nav，JQuery可以像上面的代码一样为div中的每个链接分配一个降序的z索引吗？当前打印没有z索引的链接，因此它们看起来很糟糕。

我希望它看起来是什么样子：

​

它现在的样子：

​

​

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

状态更新：：如果禁用CSS和JavaScript，则将发生breadcrumbs的适当回退。

参考：

启用CSS和JavaScript的屏幕截图：

​

禁用CSS和JavaScript的屏幕截图：

​

额外:如果CSS3版本是可以接受的，我的灵感来自于在这个上制作一个带有箭头的版本。

编辑：

额外的与的交替样式。

​

​

Answer 2

你可以这样做：

$($('#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 3

如果没有定位，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