为何Tailwind在绝对定位场景下不生效md:bottom-2类？

问题核心是默认定位类在断点下未被覆盖：灰色盒子默认设置了top-2 right-2，当md断点触发时，仅添加md:bottom-2 md:left-2无法抵消原有定位属性，导致垂直方向上top-2和md:bottom-2冲突，盒子只能水平移动，垂直位置不变。

直接修改定位类，在md断点显式重置默认定位即可：

<div class="relative flex min-h-screen flex-col items-center justify-center">
  <p class="md:hidden">sm或更小屏幕</p>
  <p class="hidden md:block">md或更大屏幕</p>
  <div class="relative size-48 bg-blue-500">
    <!-- 添加md:top-auto和md:right-auto覆盖默认定位 -->
    <div class="absolute right-2 top-2 z-10 size-20 bg-slate-500 md:bottom-2 md:left-2 md:top-auto md:right-auto">argh</div>
    <div class="z-5 absolute right-2 top-2 size-20 bg-orange-500">correct sm</div>
    <div class="z-5 absolute bottom-2 left-2 size-20 bg-orange-500">correct md</div>
  </div>
</div>

原理：Tailwind工具类优先级一致，需用auto值重置默认的top和right属性，让断点的bottom和left定位类完全生效。修改后灰色盒子在sm及以下屏幕保持右上角，md及以上屏幕切换到左下角，实现预期的斜向移动效果。

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