tailwind-css - 使用 Tailwind CSS 将 Div 置于另一个之上

Question

如何让第二个内部 div 位于第一个内部 div( map )之上？尽管使用了相对和绝对定位，但我无法弄清楚这一点。我正在使用 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>