React+Tailwind中设置-top-28实现盒子偏移不生效如何解决

Tailwind 里 -top-28 这类偏移类对应的是 CSS top 属性，这个属性只有在元素的 position 不是默认值 static 时才会生效。你写的这个 div 没有加任何定位相关类，默认处于 static 定位状态，所以 -top-28 不会产生任何效果。

根据你的布局需求选择对应方案即可：

1. 保留元素原有文档流占位，仅做视觉上的向上偏移：给 div 追加 relative 类即可，修改后代码如下：

   <div className="border text-white h-[226px] w-auto mb-[389px] bg-brand-quaternary border-brand-primary rounded-lg place-items-center grid grid-cols-4 relative -top-28">
   

2. 不想依赖定位属性实现偏移：直接把 -top-28 替换成 -translate-y-28，这个类通过 CSS transform 实现向上位移，不需要额外加定位类就能生效，视觉效果和第一种方案一致。
3. 如果需要元素脱离文档流、相对父级容器做偏移：给目标 div 的父元素加 relative 类，当前 div 加 absolute -top-28 即可，从常规的CTA模块布局场景来看，前两种方案更符合你要的压在上部内容边缘的效果。

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