inset仅对position: absolute、fixed或sticky元素生效；写在static或relative元素上无效，因未触发定位上下文，浏览器静默忽略。
inset 只对 position: absolute、fixed 或 sticky 元素生效，写在 static 或 relative 元素上完全无效。
为什么 inset 写了没反应？
最常见原因是元素没触发定位上下文。浏览器会直接忽略 inset 声明，不报错也不渲染——你写的 inset: 10px 就像没写一样。
-
position: static（默认值）：inset被静默丢弃 -
position: relative：不影响文档流位置，inset不起作用（它不是偏移自身，而是设置相对于包含块的四边距离） - 必须是
absolute/fixed/sticky才真正启用inset计算逻辑
inset 的四值简写规则和常见误用
它的展开顺序是顺时针：top → right → bottom → left，但语义不是“四个独立方向”，而是分组映射：
-
inset: 10px→top: 10px; right: 10px; bottom: 10px; left: 10px -
inset: 10px 20px→top/bottom: 10px; right/left: 20px（不是“上右下左”） -
inset: 10px 20px 30px→top: 10px; right/left: 20px; bottom: 30px -
inset: 10px 20px 30px 40px→ 完整四值，对应上右下左
⚠️ 别套用 margin 直觉去猜：比如 inset: 0 auto 中的 auto 是给 left 和 right 的，不是“自动计算所有边”。它等价于 top: 0; bottom: 0; left: auto; right: auto，配合 width 才能实现水平居中。
立即学习“前端免费学习笔记（深入）”；
哪些场景下 inset 真正省事？
适合对称或全向统一控制的绝对定位需求，改一个值就能同步影响多边：
- 全屏遮罩：
inset: 0（替代四行top/right/bottom/left: 0） - 右上角图标：
inset: 12px auto auto 12px（上=12px，右=auto，下=auto，左=12px） - 垂直拉伸+水平居中固定宽高弹窗：
inset: 20px auto+width/height+margin: auto
反例：只动 top 和 left（如 top: 20px; left: 30px），用 inset: 20px 0 0 30px 反而更难读，不如保持原写法。
兼容性和降级处理要点
Chrome 87+、Firefox 63+、Safari 14.1+ 支持，但旧版 Safari（≤14.0）完全不识别 inset，且无警告。
- 不能只写
inset：必须保留传统四属性作为降级，例如：top: 0; right: 0; bottom: 0; left: 0;inset: 0; - 预处理器（如 Sass）里慎用变量包裹
inset，某些构建工具可能提前删掉不识别的声明 -
inset不支持inherit或unset在部分老浏览器中会直接失效
真正容易被忽略的是：它和 writing-mode、direction 联动时行为会变——比如 writing-mode: vertical-rl 下，inset: 0 实际影响的是“前/后/下/上”逻辑边，而非物理边。日常开发若未显式设书写模式，这点可暂不深究；但一旦项目用了 RTL 或垂直排版，就必须验证 inset 表现是否符合预期。
