Tailwind中如何设置absolute定位元素相对于指定div并放置在其内部

你已经给父容器（第二个div）正确添加了relative类，完成了绝对定位的参照上下文设置，现在元素超出是偏移参数配置错误导致的：

• top-96：Tailwind默认间距单位为0.25rem，top-96对应top: 24rem，远大于父容器h-32对应的8rem高度，纵向偏移直接超出了父容器范围
• left-full：对应left: 100%，横向偏移量等于父容器的完整宽度，直接把元素推到了父容器右侧外部

你只需要根据需要摆放的位置调整偏移值即可，以下是几个常见场景的示例：

• 放在父容器左上角

<div class="container">
  <div class="w-2/3 h-32 bg-gray-900 text-yellow-500 relative">
    <span class="absolute top-0 left-0">hello</span>
  </div>
</div>

• 放在父容器正中间

<div class="container">
  <div class="w-2/3 h-32 bg-gray-900 text-yellow-500 relative">
    <span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">hello</span>
  </div>
</div>

• 放在父容器右下角，距离边距1rem的位置

<div class="container">
  <div class="w-2/3 h-32 bg-gray-900 text-yellow-500 relative">
    <span class="absolute bottom-4 right-4">hello</span>
  </div>
</div>

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