Div 使用 Tailwind CSS 在另一个之上

Question

如何让第二个内部 div 位于第一个内部 div（地图）之上？尽管使用相对和绝对定位，我还是想不通。我正在使用 React & Tailwind CSS。相反，第二个内部 div 当前跟随图像流并位于第一个子 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>

Answer 1

这是我根据您的查询创建的 Tailwind Play Code。我调整了高度和宽度以获得适当的视觉效果。

<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>

Div 使用 Tailwind CSS 在另一个之上

Div on top of another with Tailwind CSS

tailwind-css