如何在小屏设备中用Tailwind实现Div重叠效果？

要在小屏移动设备上让第一个Div以滑块形式重叠在第二个Div上方，你可以利用Tailwind的移动端优先特性和定位类调整布局，修改后的代码如下：

<div class="relative max-w-4xl mx-auto p-4">
  <!-- 第一个Div（滑块） -->
  <div class="absolute top-0 left-0 w-4/5 bg-white rounded-lg shadow-lg p-4 z-10 md:static md:w-1/2 md:mr-4">
    <h3 class="text-lg font-bold">第一个Div（滑块）</h3>
    <p>这里是滑块内容，小屏会叠在第二个Div上方</p>
  </div>

  <!-- 第二个Div -->
  <div class="bg-gray-100 rounded-lg p-4 pt-24 md:w-1/2 md:pt-4">
    <h3 class="text-lg font-bold">第二个Div</h3>
    <p>这里是下方的内容，小屏时会被第一个滑块部分覆盖</p>
  </div>
</div>

关键调整说明： #

• 父容器添加relative：让子元素的绝对定位以父容器为参考，避免滑块偏移到页面其他区域
• 第一个Div的小屏样式：
  • absolute top-0 left-0：固定在父容器左上角
  • w-4/5：设置滑块宽度为父容器的80%，模拟滑块露出一部分的视觉效果
  • z-10：确保滑块层级高于第二个Div
  • shadow-lg：添加阴影强化滑块的悬浮感
• 第二个Div的小屏样式：pt-24（顶部内边距）：避免内容被滑块完全遮挡，预留足够显示空间
• 大屏（md及以上）恢复并排：
  • 第一个Div加md:static：取消绝对定位，回到正常文档流
  • 两个Div都加md:w-1/2：平分宽度实现横向并排，第一个Div额外加md:mr-4增加间距

这样就能实现需求：小屏时第一个Div像滑块一样叠在第二个Div上方，大屏则保持横向并排布局。

内容的提问来源于stack exchange，提问作者rameez khan