尽管使用 z-index，伪元素与主要内容重叠

Question

我将 z-index 与伪 :after 元素和内容一起使用（其中一个是绝对定位的。）但不是 working.There 是代码 span 中的元素，它是绝对定位的。而 div timeline-items 有一个伪元素 :after

ul.timeline-items {
  position: relative;
  margin-top: 35px;
}

ul.timeline-items li:after {
  position: absolute;
  content: '';
  top: 0;
  left: 15px;
  height: 100%;
  width: 1px;
  background: #2196F3;
  z-index: -9;
}

ul.timeline-items li {
  margin-left: 55px;
  list-style: none;
}

ul.timeline-items span {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  box-shadow: 0 0px 35px #ddd;
  left: 0;
  text-align: center;
  padding: 5px 0;
  font-weight: 600;
  z-index: 99;
}

ul.timeline-items p {}

<ul class="timeline-items">
  <li>
    <span>1</span>
    <h4>Contextual Design</h4>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
    </p>
  </li>
  <li>
    <span>2</span>
    <h4>Contextual Design</h4>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
    </p>
  </li>
  <li>
    <span>3</span>
    <h4>Contextual Design</h4>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
    </p>
  </li>
</ul>

Answer 1

这不是 z-index 问题...z-index 工作正常...这是因为您的 span 没有任何背景，它是透明的...

尝试将 background 放入 span...

ul.timeline-items {
  position: relative;
  margin-top: 35px;
}

ul.timeline-items li:after {
  position: absolute;
  content: '';
  top: 0;
  left: 15px;
  height: 100%;
  width: 1px;
  background: #2196F3;
  z-index: -9;
}

ul.timeline-items li {
  margin-left: 55px;
  list-style: none;
}

ul.timeline-items span {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  box-shadow: 0 0px 35px #ddd;
  left: 0;
  text-align: center;
  padding: 5px 0;
  font-weight: 600;
  z-index: 99;
  background: #fff;
}

ul.timeline-items p {}

<ul class="timeline-items">
  <li>
    <span>1</span>
    <h4>Contextual Design</h4>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
    </p>
  </li>
  <li>
    <span>2</span>
    <h4>Contextual Design</h4>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
    </p>
  </li>
  <li>
    <span>3</span>
    <h4>Contextual Design</h4>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
    </p>
  </li>
</ul>

尽管使用 z-index，伪元素与主要内容重叠

pseudo element is overlapping main content though using z-index

html

css

pseudo-element