定位偏移简写属性
最后更新：2026-09-13
inset 定位偏移简写属性
inset 属性是 top、right、bottom、left 四个定位偏移属性的简写，用于一次性设置定位元素在各方向的偏移量。默认值 auto 表示无偏移。它只对 position 为非 static 的元素生效，语法与 margin 类似，支持 1-4 值写法。
| 分类 | |
|---|---|
| 初始值 | auto |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
inset: auto | <length> | <percentage>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
auto | 关键字 | 无偏移 |
<length> | <percentage> | 类型 | 四边偏移简写 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| inset | ✓ v79 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| 所有主流浏览器均支持 | |||||
提示： inset:0 可让绝对定位元素完全覆盖父容器，常用于遮罩层和全屏覆盖场景。
❓ 常见问题
Qinset 和 top/right/bottom/left 有什么区别？
Ainset 是 top、right、bottom、left 四个偏移属性的简写，一条规则同时设置四个方向，代码更简洁；四个单独属性则用于精确控制某一个方向，或与 inset 混合使用（单独属性优先）。两者最终都作用于定位元素的偏移，值类型相同，可以相互替换。
Qinset 支持几个值？
A支持 1~4 个值，规则与 margin 一致：1 个值设四边（inset:10px）；2 个值设上下、左右（inset:10px 20px）；3 个值设上、左右、下；4 个值按顺时针设上、右、下、左。还可混用 auto、长度和百分比。
Qinset:0 有什么作用？
Ainset:0 让定位元素的 top/right/bottom/left 都为 0。对 absolute 且父容器 relative 的元素，会拉伸填满父容器，常用于遮罩层、全屏覆盖、loading 蒙层（配合半透明背景）。若同时设了 width/height，则等价于移到容器左上角。
Qinset 的浏览器兼容性如何？
Ainset 是现代逻辑属性，Chrome 87+、Edge 87+、Firefox 66+、Safari 14.1+ 已支持，主流浏览器均可用。需兼容非常旧的浏览器时可退化为 top/right/bottom/left 四个单独属性。逻辑变体 inset-block/inset-inline 支持稍晚，注意区分。
🏷️ 相关属性
💡 相关案例
📚 相关教程
