时间戳

首页 > 解决方案 > 使用 Tailwind CSS 在另一个之上的 Div

tailwind-css - 使用 Tailwind CSS 在另一个之上的 Div

问题描述

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

解决方案

这是我根据您的查询创建的Tailwind 播放代码。我已经调整了高度和宽度以获得适当的视觉效果。

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

推荐阅读