使用 Tailwind CSS 在另一个之上的 Div答案

【问题标题】：Div on top of another with Tailwind CSS使用 Tailwind CSS 在另一个之上的 Div
【发布时间】：2021-04-21 06:52:34
【问题描述】：

如何让第二个内部 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>

【问题讨论】：

标签： tailwind-css

【解决方案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>

【讨论】：