有没有办法把这些条放在圆圈后面？答案

【问题标题】：Is there a way to put these bars behind the circles?有没有办法把这些条放在圆圈后面？
【发布时间】：2021-12-30 23:10:57
【问题描述】：

我不明白如何将这些条放在圆圈后面：

回复：https://play.tailwindcss.com/peSieAptHf

我正在尝试使用z-index，但它不起作用！

还有其他方法吗？

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

    <div class="w-full">
        <div class="relative">
            <div class="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="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="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>

【问题讨论】：

要在回合中触发 z-index，您需要一个位置。 relative 很好，还有一个 z-index 值。如果您将这 2 个课程添加到您的回合中：relative z-10 他们将悬停在栏杆上。

标签： css tailwind-css

【解决方案1】：

如果您通过类将静态位置重置为相对位置，则可以在回合中触发 z-index：relative z-10。

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="flex w-full p-20">
    <div class="w-full">
        <div class="flex mx-auto w-8 h-8 bg-gray-300 rounded-full relative z-10"></div>
    </div>

    <div class="w-full">
        <div class="relative">
            <div class="flex mx-auto w-8 h-8 bg-blue-300 rounded-full relative z-10"></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="mx-auto w-8 h-8 bg-blue-500 rounded-full relative z-10"></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="mx-auto w-8 h-8 bg-green-500 rounded-full relative z-10"></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>

【讨论】：

【解决方案2】：

您需要为条形设置负 z-index。

要设置负 z-index，请查看https://tailwindcss.com/docs/z-index#negative-values 的文档

添加负 z-index 设置后，您的代码应如下所示：

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

    <div class="w-full">
        <div class="relative">
            <div class="flex mx-auto w-8 h-8 bg-blue-300 rounded-full"></div>
            <div class="-z-10 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="mx-auto w-8 h-8 bg-blue-500 rounded-full"></div>
            <div class="-z-10 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="mx-auto w-8 h-8 bg-green-500 rounded-full"></div>
            <div class="-z-10 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>

【讨论】：

我在操场上试过你的代码，但它不起作用。
@FredHors 我认为您需要将zIndex: { '-10': '-10' } 添加到配置中才能按照链接中的说明工作。

【解决方案3】：

我试过用 css 做，结果很好：

.container {
    width: 100px;
    height: 100px;
    background: red;
    z-index: 9999;
}

.bar {
    background: blue;
    width: 200px;
    height: 10px;
    position: fixed;
    margin-top: 50px;
    margin-left: 80px;
    z-index: -1;
}

HTML：

<div class="bar"></div>
<div class="container"></div>

【讨论】：