Z-Index für Pseudo-Element funktioniert nicht

Question

Ich versuche, Brotkrumen zu erstellen, aber leider Z-Index funktioniert nicht.Ich versuchte höhere Werte sowie Vorrang mit! Wichtig. Hier ist mein Code:

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>

Der Code auf separater HTML-Seite gearbeitet, aber wenn ich es mit neuer Website integriert, um die Linien vanished.What Werte für z-index funktionieren würden, so dass die Linien sind unten Kreise stattdessen oben? Alle Vorschläge werden sehr geschätzt. Vielen Dank im Voraus, Neko

Answer 1

Verwenden z-index in ul statt li, und stellen Sie sicher, dass die ul nicht 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:

Elemente mit einer z-index können nicht durch Vorfahren mit einer z-index brechen. ein Kind mit z-index: -100 kann nicht hinter seinem Elternteil mit z-index: 1000 sein.

Beachten Sie, dass z-index nur an Elementen funktioniert, bei denen position nicht static ist (Standardwert).

Answer 2

Versuchen Sie es.

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>

Answer 3

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>