设置z-index后伪元素:after仍与主内容重叠，技术求助

嘿，我来帮你搞定这个z-index不生效的问题！这种情况大多是因为堆叠上下文的创建规则没搞对，咱们一步步来分析：

问题根源 #

你的代码里，li元素是默认的position: static（没有显式设置position），这就导致：

• li:after这个绝对定位的伪元素，它的包含块是最近的定位父元素——也就是ul.timeline-items（因为ul设置了position: relative）。
• 那个绝对定位的span元素，如果它的父元素li没有定位，它的包含块同样是ul。这时候伪元素和span都处于ul的堆叠上下文中，它们的层级关系会受DOM顺序影响，z-index的设置自然达不到你想要的效果。

解决方案 #

给li添加position: relative，让它创建自己的堆叠上下文，这样伪元素的z-index就会相对于li生效：

修改后的CSS代码：

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; 
  position: relative; /* 新增这一行 */
}

原理说明 #

• z-index只有在定位元素（position值为relative、absolute、fixed、sticky）上才会生效，同时定位元素会创建自己的堆叠上下文。
• 当li设置了position: relative后，li:after就变成了li的子元素，它的z-index: -9会让它处于li所有内容（包括那个绝对定位的span）的下方——因为span是li的子元素，默认z-index为auto，层级比-9高，这样伪元素的线条就会被span压在下面，完美实现你想要的效果！

内容的提问来源于stack exchange，提问作者Alex Garret jones