Tailwind CSS如何将条形置于圆形下方？z-index无效有什么替代方案？

你遇到的z-index未生效的核心原因是：z-index仅对position属性非static的元素生效，且在同一个堆叠上下文内，后声明的DOM元素默认层级高于先声明的元素。你当前的结构中，每个relative容器内先声明圆形，后声明绝对定位的条形，所以条形默认覆盖在圆形上方。

可行的实现方案 #

以下两种方案都可以快速实现条形置于圆形下层的效果：

• 调整DOM顺序：将每个relative容器内的条形元素移到圆形元素之前，不需要额外配置z-index，利用浏览器默认层级规则即可实现效果。
• 主动设置圆形层级：不需要调整DOM顺序，给所有圆形元素加上relative z-10类，主动拉高圆形的堆叠层级即可。

修改后的完整代码示例：

<div class="flex w-full p-20">
    <div class="w-full">
        <div class="relative z-10 flex mx-auto w-8 h-8 bg-gray-300 rounded-full"></div>
    </div>

    <div class="w-full">
        <div class="relative">
            <div class="relative z-10 flex mx-auto w-8 h-8 bg-blue-300 rounded-full"></div>
            <div class="absolute inset-0 flex items-center -translate-x-2/4">
                <div class="h-0.5 w-full bg-green-500"></div>
            </div>
        </div>
    </div>

    <div class="w-full">
        <div class="relative">
            <div class="relative z-10 mx-auto w-8 h-8 bg-blue-500 rounded-full"></div>
            <div class="absolute inset-0 flex items-center -translate-x-2/4">
                <div class="h-0.5 w-full bg-gray-700"></div>
            </div>
        </div>
    </div>

    <div class="w-full">
        <div class="relative">
            <div class="relative z-10 mx-auto w-8 h-8 bg-green-500 rounded-full"></div>
            <div class="absolute inset-0 flex items-center -translate-x-2/4">
                <div class="h-0.5 w-full bg-red-500"></div>
            </div>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Fred Hors