Div on top of another with Tailwind CSS

Cesare Published at Dev

307

Cesare

How do I get the second inner div to be on top of the first inner div (map)? I can't figure this out, despite using relative & absolute positioning. I'm using React & Tailwind CSS. Instead, the second inner div currently follows the flow of the image and is positioned below the first children div.

<div className="relative w-full h-screen">
  <div className="bg-green-400 w-full h-full z-0">
    <p className="italic text-bold bd-red-100 font-serif">Map</p>
  </div>
  <div className="absolute z-50">
    <p className="text-2xl font-bold">This should be on top of the map</p>
  </div>
</div>

Digvijay

Here's a Tailwind Play Code I created based on your query. I have twiqued height and width for proper visual.

<div class="w-full h-screen bg-gray-200 flex justify-center items-center">
  <div class="bg-gray-400 w-96 h-96 relative z-0">
    <p class="italic text-bold bd-red-100 font-serif">Map</p>
    <div class="absolute inset-0 flex justify-center items-center z-10">
      <p class="text-2xl font-bold">This should be on top of the map</p>
    </div>
  </div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.