Theo's Typesafe Cult•3y ago

How to display two divs in exact same position using tailwind

Hi everyone, what's the best way display two divs on top of each other in the exact same position using tailwind? I've found some tutorials that mention using grid-area: https://css-tricks.com/positioning-overlay-content-with-css-grid/#aa-the-overlay-grid-area But tailwind doesn't seem to support grid-area (found a library that extends it but not sure if there's a simpler way). Thanks for your help!

Ryan Mulligan

CSS-Tricks

Positioning Overlay Content with CSS Grid | CSS-Tricks

Not news to any web developer in 2021: CSS Grid is an incredibly powerful tool for creating complex, distinct two-dimensional modern web layouts.

2 Replies

SuplenC•3y ago

You can place one div on top of the other with position and so using tailwind.

<div class="h-screen w-full relative">
    <div>This is a bottom one</div>
    <div class="absolute z-10 top-0 left-0 right-0 bottom-0">This is a top one</div>
</div>

Bryan3OP•3y ago

Will try it out, thanks!

Gaming

Programming

How to display two divs in exact same position using tailwind