Tailwind绝对定位元素设置right-2不生效无法被父relative容器包含问题求助

问题原因 #

<input>是浏览器内置的替换元素，自带默认宽度属性，该属性优先级高于绝对定位下left+right共同计算生成的宽度，因此你设置的right-2不会生效，input的宽度不会被父容器右边界限制。

解决方案 #

你可以任选以下任意一种方法修复：

• 方法1：覆盖input默认宽度
  给input添加w-auto和box-border类，取消默认宽度，让left和right的定位规则生效：

<input
    id="salary"
    name="salary"
    className="peer text-xl absolute left-2 right-2 top-5 rounded-md bg-red-200 w-auto box-border"
    placeholder="Salary"
    type="number"
/>

• 方法2：改用父容器内边距+全宽input
  给父容器添加左右内边距，input设置w-full，效果一致且更易维护：

<div className="relative border-r border-gray-200 bg-gray-200 h-full px-2">
    <input
        id="salary"
        name="salary"
        className="peer text-xl absolute top-5 w-full rounded-md bg-red-200"
        placeholder="Salary"
        type="number"
    />
    <label
        htmlFor="salary"
        className="absolute left-2 top-0 bg-green-100"
    >
        Salary
    </label>
</div>

• 方法3：手动计算宽度
  直接给input设置匹配左右间距的宽度，兼容性最好：

<input
    id="salary"
    name="salary"
    className="peer text-xl absolute left-2 top-5 rounded-md bg-red-200 w-[calc(100%-1rem)]"
    placeholder="Salary"
    type="number"
/>

注：1rem对应left-2+right-2的总间距（Tailwind中-2对应0.5rem，左右合计1rem）

原问题效果截图 #

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