有沒有辦法把這些條放在圓圈后面？

我無法理解如何將這些條放在圓圈后面：

REPL：https : //play.tai??lwindcss.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>

uj5u.com熱心網友回復：

如果您通過類將靜態位置重置為相對位置，則可以在回合中觸發 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>

uj5u.com熱心網友回復：

您需要為條形設定負 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>

uj5u.com熱心網友回復：

我嘗試用 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;
}  

網址：

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

標籤：css 顺风-css

上一篇：休眠與繼承的關系

下一篇：將<a>居中和<img>左對齊，都在<td>內垂直居中