Is there a way to put these bars behind the circles? - css

Question

I couldn't understand how to put these bars behind the circles:
REPL: https://play.tailwindcss.com/peSieAptHf
I'm trying with z-index but it doesn't work!
Is there an alternative way?
<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>

Answer 1

z-index can be triggered on the rounds if you reset the static position to relative via classes : 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>

Answer 2

You need to set negative z-index to the bars.
To set negative z-index, check the docs at https://tailwindcss.com/docs/z-index#negative-values
After adding the negative z-index setup, your code should look like this:
<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>

Answer 3

I tried doing it with css and it worked out:
.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>