虽然使用z-index，但伪元素与主要内容重叠

Question

我正在使用带有伪的z-index：在元素和内容之后（其中一个是绝对定位的。）但是没有工作。代码span中有一个绝对定位的元素。而div timeline-items有一个伪元素:after

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

不是protected Point getInitialLocation(Point initialSize) 问题...... 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 {}