inset 只对 absolute、fixed 或 sticky 元素生效，relative 或 static 上无效；失效主因是父容器未设非 static 定位、传统定位属性覆盖、逻辑属性不兼容或 Flex/Grid 容器中被忽略。
inset 能简化 absolute 定位的偏移书写，但只在 position: absolute、fixed 或 sticky 元素上生效；写在 relative 或 static 元素上完全无效。
inset 为什么写了没效果？常见失效原因
不是语法错，而是定位上下文或覆盖逻辑出了问题：
- 父容器没设
position: relative（或其它非static值），子元素的inset会相对于视口计算，看起来像“飞出去了” - 同时写了
inset: 10px和top: 20px—— 后者会覆盖inset的top分量，实际top是 20px，其余三边才是 10px - 用了
inset-inline-start等逻辑属性，但没配writing-mode或浏览器不支持（Safari 16.4+ 才支持） - 在 Flex 或 Grid 容器里给子项设
inset，它会被静默忽略——inset不影响 flex/grid 的布局机制
inset 的值怎么写才不翻车？
语法和 margin 一致，但语义是定位偏移，不是外边距：
- 单值：
inset: 16px⇔top: 16px; right: 16px; bottom: 16px; left: 16px - 双值：
inset: 12px 24px⇔top/bottom = 12px; right/left = 24px - 三值：
inset: 8px 16px 24px⇔top = 8px; right/left = 16px; bottom = 24px - 四值：
inset: 0 0 44px 0⇔top: 0; right: 0; bottom: 44px; left: 0（常用于底部安全区） - 混合
auto：inset: 0 auto 0 50%合法，但inset: auto本身无效
移动端和兼容性必须注意的坑
inset 在 iOS Safari 15.4+、Chrome 95+、Firefox 63+ 支持，但旧环境处理极不友好：
立即学习“前端免费学习笔记（深入）”；
- 不要只靠
@supports (inset: 0)包裹整块样式——老设备会跳过整个定位逻辑，元素直接堆在文档流顶部 - fallback 必须重置传统属性：
top: auto; right: auto; bottom: auto; left: auto;缺一不可，否则新旧规则叠加导致偏移错乱 - 键盘弹出时
vh失真，优先用inset: env(safe-area-inset-bottom)而非硬写像素值 - RTL 页面里
inset: 16px 24px 16px 24px仍是“上-右-下-左”，不会自动翻转；真要适配得换inset-block/inset-inline+dir
真正难的不是写对 inset，而是判断该不该用——只在四边偏移有明确统一意图（比如全屏遮罩、固定间距弹窗）时才值得替换；若只调一边，硬套 inset 反而增加维护负担和出错概率。
