Descend z-index logically

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>

I have a simple breadcrumb nav, can JQuery assign a descending z-index to each link in the div like the code above? Currently prints the links with no z-index so they look bad.

How I want it to look:

How it currently looks:

CSS

The only real key players in the CSS are the position and margin-left, but here it is in its entirety :)

#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

You can do it like this:

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

Or, if you'd prefer to loop with .each():

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

Note that for this to work, you'll need to ensure that your a elements have position: relative.

Answer 2

Status Update:   If CSS and JavaScript are disabled then proper fallback for breadcrumbs will occur.

Reference:   jsFiddle

Screenshot of CSS and JavaScript Enabled:

Screenshot of CSS and JavaScript Disabled:

        

Extra: If a CSS3 version is acceptable, I was inspired to make a version with Arrows at this SO Answer.

---

EDIT:

Extra jsFiddle with alternate style by Simon Sarris.

Answer 3

Without positioning z-index is pretty much useless

<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