TailwindCSS绝对定位元素超出父容器问题排查求助

你的四个绝对定位元素（1、2、3、4）超出预期范围的核心原因是定位基准错误：

• 绝对定位元素的定位参考是最近的设置了position: relative/absolute/fixed/sticky的祖先元素。
• 你给1、2、3、4设置了absolute，但它们的直接父容器（顶部的bg-blue-200 div和底部的bg-slate-400 div）没有添加relative类，导致这些数字元素会跳过父容器，直接以更外层的那个relative div作为定位基准。

外层的relative div基于最外层容器的内容宽度（最外层容器有px-2内边距，内容宽度比容器总宽度小），所以当数字元素对齐这个外层relative的边缘时，看起来就会超出顶部/底部栏的范围，甚至超出最外层容器的内边距区域。

给顶部和底部的栏添加relative类，让内部的绝对定位元素以它们为基准定位：

<div class="bg-blue-100 h-40 w-96 px-2">
  <div class="relative w-full h-full">
    <!-- 添加 relative 类 -->
    <div class="absolute top-0 bg-blue-200 w-full relative">
      <div class="absolute left-0">1</div>
      <div class="absolute right-0">2</div>
    </div>
     <!-- 添加 relative 类 -->
     <div class="absolute bottom-0 bg-slate-400 w-full relative">
       <div class="absolute left-0">3</div>
       <div class="absolute right-0">4</div>
     </div>
  </div>
</div>

如果希望顶部和底部栏自动适应内容高度，可以移除w-full，改用left-0 right-0来占满宽度，定位会更准确：

<div class="bg-blue-100 h-40 w-96 px-2">
  <div class="relative w-full h-full">
    <div class="absolute top-0 left-0 right-0 bg-blue-200 relative">
      <div class="absolute left-0">1</div>
      <div class="absolute right-0">2</div>
    </div>
     <div class="absolute bottom-0 left-0 right-0 bg-slate-400 relative">
       <div class="absolute left-0">3</div>
       <div class="absolute right-0">4</div>
     </div>
  </div>
</div>

调整后，1会对齐顶部栏左边缘，2对齐右边缘，3、4同理，不会再超出父容器范围。

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