代码之家 › 专栏 › 技术社区 › Fred Hors

有没有办法把这些栅栏放在圆圈后面?

tailwind-css css

Fred Hors · 技术社区 · 3 年前

我不明白如何放置这些栅栏 在…的后面 圆圈:

回复: 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>

1 回复 | 直到 3 年前

G-Cyrillus 3 年前

如果通过类将静态位置重置为相对位置,则可以在循环中触发z索引: 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>

Carles Rider 3 年前

您需要将负z索引设置为条形图。

若要设置负z索引,请查看上的文档 https://tailwindcss.com/docs/z-index#negative-values

添加负z索引设置后,您的代码应该如下所示:

<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>

EmielV 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;
}

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