逻辑下降z-index [英] Descend z-index logically

问题描述

 < div id =crumbs> 
 
< a href =＃style =z-index：4;>工作场所标准< / a> &＃62; 
< a href =＃style =z-index：3;> Resources< / a> &＃62; 
< a href =＃style =z-index：2;>指南< / a> &＃62; 
< a href =＃style =z-index：1;>公众假期< / a> 
 
< / div> 
 

我有一个简单的breadcrumb导航，JQuery可以为div中的每个链接分配一个递减的z-index像上面的代码？目前打印没有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; 
} 
  

解决方案

状态更新： 如果 CSS 和 JavaScript 已停用，则后退适用于 breadcrumbs 。

参考：   制作带箭头的版本>。

$ b b $ b

额外

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

解决方案

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.

这篇关于逻辑下降z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！