伪元素的z-index不起作用

Question

我试图创建面包屑，但不幸的是z-index并不起作用。我尝试了更高的值以及覆盖！important。这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

代码在单独的html页面上工作但是当我将它与新网站集成时，线条消失了。对于z-index的哪些值会起作用，所以线条在圆圈之下而不是在上面？ 任何建议都非常感谢。 提前谢谢了， ネ

Answer 1

试试这个。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

在z-index而不是ul中使用li，并确保ul不是position: static;：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Eplanation：

z-index的元素无法通过z-index突破祖先。即z-index: -100的孩子不能在z-index: 1000的父母身后。

请注意，z-index仅适用于position不是static（默认值）的元素。

Answer 3

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;