CODEWITHSUNDEEP
htmlcsstailwind-css
glitchbox
glitchbox

Reputation: 135

Stack, center and arrange elements in Tailwind CSS

How do I position two elements inside a div, one in front of the other, and make the one on the back slightly drop below the one on the top?

This is my code currently:

<div class="flex-col">
    <div class="mx-auto">
        <iframe width="812" height="478" src="https://www.youtube.com/embed/NpEaa2P7qZI" class="rounded-[40px]"></iframe>
    </div>
    <div id="circle" class="rounded-full bg-slate-500 h-96 w-96"></div>
</div>

This is what I'm trying to achieve: Video Place Holder Example

Upvotes: 0

Views: 850

Answers (1)

Dipo Ahmed
Dipo Ahmed

Reputation: 387

<script src="https://cdn.tailwindcss.com"></script>

<div class="relative">
    <div class="w-[90%] h-[350px] m-auto">
        <iframe class="w-full h-full" src="https://www.youtube.com/embed/NpEaa2P7qZI"    
        class="rounded-[40px]"></iframe>
    </div>
    <div class="absolute rounded-full bg-slate-500 h-96 w-96 top-[50px] left-[50%] translate-x-[-50%] z-[-1]" id="circle" ></div>
</div>

Try this code

Set the parent element position to relative and the child element which you want to move around to absolute. which will allow an element to use top, right, bottom, and, left. With this now you can you can move your circle element to anywhere relative to the parent element. And then set the z index of the circle element to -1 which will show the circle element below your other elements.

you can play around with the translate, top, and left tailwlind classes to get what you desire.

CSS position property

CSS translate property

Upvotes: 1

Related Questions