Timeline容器伪元素before的z-index层级异常问题求助

云原生阿岚

2026-5-29

解决Timeline容器伪元素:before的z-index层级问题

嘿，我来帮你搞定这个困扰！你提到的Timeline容器（.timeline-container）的:before伪元素现在挡在幻灯片前面，调整z-index没生效的问题，其实是堆叠上下文和元素样式的双重因素导致的，咱们一步步来解决：

问题根源拆解

当前.timeline-container:before设置了z-index:5，而它的子元素.timeline-slider有position:relative; z-index:10，理论上幻灯片应该在伪元素上方，但因为你的幻灯片区块（.block）没有设置背景色，伪元素的渐变线条会透过透明区块“透出来”，视觉上就像挡在幻灯片前面。另外如果只是把伪元素的z-index调低成正数，还是会因为堆叠上下文的层级关系，没法落到幻灯片后方。

两种可行解决方案

你可以根据自己的需求选其中一种：

方案1：给幻灯片区块添加背景色（简单直观）

直接给.slide .block加上白色背景，让它挡住后面的线条：

.slide.full-block .block {
  // 保留原有样式
  box-shadow: 0px 0px 21px -2px rgba(204,204,204,0.75);
  border-radius: 10px;
  padding: 20px;
  strong {
    color: @dark;
    font-weight: 700;
    display: inline-block;
    margin: 0;
  }
  // 新增背景色
  background: @white;
}

方案2：把伪元素z-index设为负数（不改变区块样式）

修改.timeline-container:before的z-index为-1，这样它会自动落到.timeline-container所有子元素的下方，包括幻灯片：

.timeline-container {
  max-width: 960px;
  position: relative;
  margin: 0 auto;
  padding-top: 60px;
  &:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin-top: 30px;
    background: linear-gradient(90deg, @orange, @yellow);
    height: 0.5px;
    width: 100%;
    // 修改z-index为-1
    z-index: -1;
  }
}