z-index僞元素不起作用

我正在嘗試創建麪包屑，但不幸的是z-index不起作用。我嘗試了更高的值以及重寫！重要。這裏是我的代碼：z-index僞元素不起作用

li.breadcr { 
 
    width: 2em; 
 
    height: 2em; 
 
    text-align: center; 
 
    line-height: 2em; 
 
    border-radius: 1em; 
 
    background: #0095c4; 
 
    margin: 0 3em; 
 
    display: inline-block; 
 
    color: white; 
 
    position: relative; 
 
    z-index: 900000; 
 
} 
 
li.breadcr::before { 
 
    content: '' !important; 
 
    position: absolute !important; 
 
    top: .9em !important; 
 
    left: -8em !important; 
 
    width: 10em !important; 
 
    height: .2em !important; 
 
    background: #0095c4 !important; 
 
    z-index: -1 !important; 
 
} 
 
li.breadcr:first-child::before { 
 
    display: none !important; 
 
} 
 
.active { 
 
    background: #0095c4; 
 
} 
 
.active ~ li.breadcr { 
 
    background: #badae4 !important; 
 
} 
 
.active ~ li.breadcr::before { 
 
    background: #badae4 !important; 
 
} 
 
ul.sub { 
 
    list-style: none; 
 
} 
 
li.sub02 { 
 
    display: inline-block; 
 
    font-family: TeX Gyre Heros, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; 
 
}

<ul> 
 
    <li class="breadcr">1</li> 
 
    <li class="active breadcr">2</li> 
 
    <li class="breadcr">3</li> 
 
</ul> 
 
<ul class="sub"> 
 
    <li class="sub02" style="margin-left: 25px;"><b>File or link</b> 
 
    </li> 
 
    <li class="sub02" style="margin-left: 53px;"><b>Category</b> 
 
    </li> 
 
    <li class="sub02" style="margin-left: 50px;"><b>Comments</b> 
 
    <li> 
 
</ul>

的代碼工作單獨的HTML頁面上，但是當我有新的網站綜合它vanished.What Z-Index的值會工作的線，所以線條圓下方而不是上面？任何建議，非常感謝。非常感謝， Neko

來源

2016-11-04 Neko

使用z-index在ul代替li，並確保該ul不position: static;：

ul { 
 
    position: relative; 
 
    z-index: 900000; 
 
} 
 
li.breadcr { 
 
    width: 2em; 
 
    height: 2em; 
 
    text-align: center; 
 
    line-height: 2em; 
 
    border-radius: 1em; 
 
    background: #0095c4; 
 
    margin: 0 3em; 
 
    display: inline-block; 
 
    color: white; 
 
    position: relative; 
 
} 
 
li.breadcr::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: .9em; 
 
    left: -8em; 
 
    width: 10em; 
 
    height: .2em; 
 
    background: #0095c4; 
 
    z-index: -1; 
 
} 
 
li.breadcr:first-child::before { 
 
    display: none; 
 
} 
 
.active { 
 
    background: #0095c4; 
 
} 
 
.active ~ li.breadcr { 
 
    background: #badae4; 
 
} 
 
.active ~ li.breadcr::before { 
 
    background: #badae4; 
 
} 
 
ul.sub { 
 
    list-style: none; 
 
} 
 
li.sub02 { 
 
    display: inline-block; 
 
    font-family: TeX Gyre Heros, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; 
 
}

<ul class="breadcr"> 
 
    <li class="breadcr">1</li> 
 
    <li class="active breadcr">2</li> 
 
    <li class="breadcr">3</li> 
 
</ul> 
 
<ul class="sub"> 
 
    <li class="sub02" style="margin-left: 25px;"><b>File or link</b> 
 
    </li> 
 
    <li class="sub02" style="margin-left: 53px;"><b>Category</b> 
 
    </li> 
 
    <li class="sub02" style="margin-left: 50px;"><b>Comments</b> 
 
    <li> 
 
</ul>

Eplanation：

帶有z-index的元素不能破壞帶有z-index的祖先。即z-index: -100的孩子不能在z-index: 1000的父母后面。

請注意，z-index僅適用於position不是static（默認值）的元素。

來源

2016-11-04 11:31:02

我嘗試了z-index for ul，並且這些行仍然不可見@Andy Tschiersh – Neko

我已更新我的答案。 'ul'必須是'position：relative'（或絕對的或固定的，但非靜態的） –

我已經添加了相對位置，並且這些行仍然位於圓圈上方：https：//ewelinawoloszyn.github.io/Form/index03。 html @Andy Tschiersch – Neko

試試這個。

li.breadcr { 
 
    width: 2em; 
 
    height: 2em; 
 
    text-align: center; 
 
    line-height: 2em; 
 
    border-radius: 1em; 
 
    background: #0095c4; 
 
    margin: 0 3em; 
 
    display: inline-block; 
 
    color: white; 
 
    position: relative; 
 
} 
 

 
li.breadcr::before{ 
 
    content: '' !important; 
 
    position: absolute !important; 
 
    top: .9em !important; 
 
    left: -8em !important; 
 
width: 10em !important; 
 
    height: .2em !important; 
 
    background: #0095c4 !important; 
 
    z-index: -1 
 
} 
 

 

 
li.breadcr:first-child::before { 
 
    display: none !important; 
 
} 
 

 
.active { 
 
    background: #0095c4; 
 
} 
 

 
.active ~ li.breadcr { 
 
    background: #badae4 !important; 
 
} 
 

 
.active ~ li.breadcr::before { 
 
    background: #badae4 !important; 
 
} 
 
ul.sub{ 
 
list-style: none; 
 
} 
 
li.sub02{ 
 
    display: inline-block; 
 
     font-family: TeX Gyre Heros,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<ul> 
 
<li class="breadcr" >1</li> 
 
<li class="active breadcr">2</li> 
 
<li class="breadcr">3</li> 
 
    </ul> 
 
    <ul class="sub"> 
 
    <li class="sub02" style="margin-left: 25px;"><b>File or link</b></li> 
 
    <li class="sub02" style="margin-left: 53px;"><b>Category</b></li> 
 
    <li class="sub02" style="margin-left: 50px;"><b>Comments</b><li> 
 
    </ul>

來源

2016-11-04 11:30:53

我想你的方法傢伙和線消失：https://ewelinawoloszyn.github.io/Form/index03.html – Neko

你有@Andy Tschierch和@priya_singh任何其他建議？ – Neko

看看我的答案，你只需要在ul中使用z-index而不是li。 –

li.breadcr { 
 
    width: 2em; 
 
    height: 2em; 
 
    text-align: center; 
 
    line-height: 2em; 
 
    border-radius: 1em; 
 
    background: #0095c4; 
 
    margin: 0 3em; 
 
    display: inline-block; 
 
    color: white; 
 
    position: relative; 
 
} 
 
li.breadcr::before { 
 
    content: '' !important; 
 
    position: absolute !important; 
 
    top: .9em !important; 
 
    left: -8em !important; 
 
    width: 10em !important; 
 
    height: .2em !important; 
 
    background: #0095c4 !important; 
 
    z-index: -1 !important; 
 
} 
 
li.breadcr:first-child::before { 
 
    display: none !important; 
 
} 
 
.active { 
 
    background: #0095c4; 
 
} 
 
.active ~ li.breadcr { 
 
    background: #badae4 !important; 
 
} 
 
.active ~ li.breadcr::before { 
 
    background: #badae4 !important; 
 
} 
 
ul.sub { 
 
    list-style: none; 
 
} 
 
li.sub02 { 
 
    display: inline-block; 
 
    font-family: TeX Gyre Heros, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; 
 
}

<ul> 
 
    <li class="breadcr">1</li> 
 
    <li class="active breadcr">2</li> 
 
    <li class="breadcr">3</li> 
 
</ul> 
 
<ul class="sub"> 
 
    <li class="sub02" style="margin-left: 25px;"><b>File or link</b> 
 
    </li> 
 
    <li class="sub02" style="margin-left: 53px;"><b>Category</b> 
 
    </li> 
 
    <li class="sub02" style="margin-left: 50px;"><b>Comments</b> 
 
    <li> 
 
</ul>

來源

2016-11-04 12:41:42 Venkatachalam

z-index僞元素不起作用

回答

相關問題