如何用Tailwind实现两个元素固定叠加且不受容器新增元素影响？

问题出在绝对定位元素的参考容器上：你的第二个按钮用了absolute类，但外层容器#container没有设置定位上下文（即缺少relative类），这会导致这个绝对定位按钮以页面中最近的已定位父元素（通常是<body>）为基准定位。当你往容器里添加更多元素时，容器自身的位置或尺寸发生变化，按钮的定位参考点却没变，自然会出现移位。

修复步骤： #

• 给容器#container添加relative类，让内部绝对定位元素以容器为定位基准
• 根据需求调整第二个按钮的top、left等值，使其相对于容器保持固定位置

修改后的代码示例：

<div class="w-10 h-10 relative" id="container">
  <button class="relative w-4 h-4 bg-red"> Iniciado </button>
  <!-- 这里的top/left可根据叠加需求调整，比如top-0 left-0实现完全重叠 -->
  <button class="absolute top-0 left-0 w-4 h-4 bg-red"> item </button>
</div>

补充说明： #

• 父元素设置relative后，内部absolute元素的定位坐标（top/right/bottom/left）会相对于父元素的内边缘计算
• 若需要完全覆盖第一个元素，可直接给第二个按钮加inset-0类，使其填满父容器的范围

内容的提问来源于stack exchange，提问作者Fernando Diaz