TailWind CSS中absolute定位按钮添加translate样式后下移原因求解

• 内联style的transform属性优先级高于Tailwind类：CSS中transform属性无法多值叠加，后定义的高优先级规则会直接覆盖低优先级的transform规则。你在button的内联style中写了transform:translateX(10px);，优先级高于Tailwind类，直接覆盖了类中定义的-translate-y-32上移规则，缺少了上移偏移的按钮自然会出现异常下移的表现。
• Tailwind类名存在语法错误：button的class属性中translate-x-后缀缺少具体偏移数值，属于无效类，本身无法生效。
• absolute定位缺少相对定位祖先元素：absolute定位的元素会相对于最近的非static定位祖先元素偏移，你当前button的父级div没有添加relative类，按钮的偏移基准不是父容器，位置本身就会出现不符合预期的偏移。

建议统一将transform偏移写在Tailwind类中，避免优先级覆盖问题，同时给父元素添加相对定位类：

<div class="w-auto h-30 m-5 overflow-hidden flex justify-center">
    <div class="relative">
      <img class="object-fit" src="https://fs.easybanners.com/Templates/795/TemplateIcon/795.png" alt="" style="height: 50vh;">
      <button class="bg-indigo-500 rounded absolute transform -translate-y-32 translate-x-[10px] px-12"> Contact Us </button>
    </div>
</div>

如果需要保留内联写法，需要在transform中同时声明X轴和Y轴的偏移，避免覆盖：
style="transform:translateX(10px) translateY(-8rem);" （-translate-y-32对应计算值为-8rem）

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