Tailwind CSS时间线偶数项图标未正确覆盖中线问题排查

问题核心是堆叠上下文层级冲突：当前红线作为内容容器的兄弟元素，与内容容器处于同一堆叠层级，flex布局的元素顺序导致偶数项图标被红线“穿透”。

两种简洁解决方案 #

方法1：将红线移入内容容器内

把红线元素放到space-y-12容器内部，让红线处于内容容器的堆叠上下文里，图标自带的z-10会自动覆盖红线：

修改后的核心代码片段：

<div className="relative">
  <div className="space-y-12 relative">
    {/* 红线移至内容容器内 */}
    <div className="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-red-200 transform -translate-x-1/2" />
    {timeline.map((tl, index) => (
      {/* 原时间线项代码保持不变 */}
    ))}
  </div>
</div>

方法2：给红线设置更低的z-index

给红线元素添加z-0，利用HTML顺序优先级（内容容器在红线之后）确保内容层级更高：

修改红线的className：

<div className="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-red-200 transform -translate-x-1/2 z-0" />

效果验证 #

两种方法都能让所有图标（包括偶数项）正常覆盖中间红线，且完全保留原时间线的布局结构。

内容的提问来源于stack exchange，提问作者GʀᴜᴍᴘʏCᴀᴛ