CSS中是否存在position属性的简写语法？类似margin/padding的写法

好问题！我也曾经纠结过这个点——毕竟margin、padding都有便捷的简写语法，为啥position相关的定位属性就没有统一的简写呢？

直接给结论：目前CSS官方规范里没有支持将position类型与top/right/bottom/left合并的简写方式，你没法写成position: absolute 0 0 0 0;这种形式，MDN上找不到相关内容也正是因为这不是标准特性。

不过，有个标准的替代方案能帮你大幅简化代码：使用inset属性。

用 inset 实现定位属性的简写 #

inset是CSS Logical Properties中的标准属性，它是top、right、bottom、left这四个定位属性的统一简写，用法和margin/padding的简写规则完全一致：

• 单个值：inset: 0; → 等同于top:0; right:0; bottom:0; left:0;
• 两个值：inset: 10px 20px; → 等同于top:10px; bottom:10px; left:20px; right:20px;
• 三个值：inset: 5px 10px 15px; → 等同于top:5px; right:10px; bottom:15px; left:10px;
• 四个值：inset: 5px 10px 15px 20px; → 等同于top:5px; right:10px; bottom:15px; left:20px;

所以你想要的全屏绝对定位，可以写成：

position: absolute;
inset: 0;

这已经比写四个单独的定位属性简洁很多，而且所有现代浏览器都支持这个属性。

其他简化技巧 #

如果需要频繁使用某种定位组合，还可以通过以下方式进一步简化：

• 自定义CSS类：提前定义通用类，需要时直接添加到元素上

  .full-absolute {
    position: absolute;
    inset: 0;
  }
  

• CSS变量+@apply（实验性）：如果使用PostCSS等工具支持，可以定义变量并复用

  :root {
    --full-absolute: {
      position: absolute;
      inset: 0;
    };
  }
  
  .target-element {
    @apply --full-absolute;
  }
  

  注意：@apply目前属于实验性特性，使用前需要确认环境支持。

总的来说，虽然没有你设想的那种把position类型和定位值合并的简写，但inset已经很好地解决了定位属性的简写需求，而且是标准特性，放心使用就好。

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