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

【问题标题】：pseudo element is overlapping main content though using z-index尽管使用 z-index，伪元素与主要内容重叠
【发布时间】：2018-03-20 15:59:43
【问题描述】：

我正在使用带有伪 :after 元素和内容的 z-index（其中一个是绝对定位的。）但不起作用。代码 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>

【问题讨论】：

标签： html css pseudo-element

【解决方案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>

【讨论】：