How to make flex items overlap

September 5, 2022

My document currently looks like this: https://i.stack.imgur.com/VeUFo.png
But I want the circle to overlap the boxes like this: https://i.stack.imgur.com/99I6s.png

How do I do that?

Code:

<body class="bg-black">
    <div class="flex flex-col items-center md:flex-row md:justify-center gap-0">
        <div
            class="w-80 h-52 bg-black border-white border-2 border-opacity-30 rounded-lg flex flex-col justify-center items-center gap-4">
        </div>
        <div
            class="w-24 h-24 font-bold rounded-full text-white border-white border-2 border-opacity-30 flex items-center justify-center">
            OR</div>
        <div
            class="w-80 h-52 bg-black border-white border-2 border-opacity-30 rounded-lg flex flex-col justify-center items-center gap-4">
        </div>
    </div>
</body>

>Solution :

You can try adding negative margins to your "OR" div. Note you will have to increase the z-index too, and set a background colour to achieve the desired result.

You can append these classes to your class attribute: