javascript - 为页面添加边距，包括绝对/固定定位元素

Question

有没有办法为包含绝对定位元素和固定定位元素的页面设置全局边距？

Answer 1

这是可能的，因为你用一个在其上设置了转换的元素来包装这些绝对/固定元素。

查看规范:The Transform Rendering Model

Specifying a value other than ‘none’ for the ‘transform’ property establishes a new local coordinate system at the element that it is applied to.

body {
  margin: 100px;
  color: white;
  transform: translateX(0);
  border-top: 2px solid green;
}
.absolute, .fixed {
  width: 100px;
  height: 100px;
  top: 0; 
}
.absolute {
  position: absolute;
  background-color: red;
  left: 0;
}
.fixed {
  position: fixed;
  background-color: blue;
  right: 0;
}

<div class="absolute">absolute</div>
<div class="fixed">fixed</div>

请注意，在上面的代码片段中，absolute 和 fixed 元素都相对于带有边距的 body 定位。

注意:

1) 我不一定推荐以这种方式使用它，因为从长远来看，它很可能会造成混淆。

2) 正如@Temani Afif 所指出的那样，固定元素将以这种方式表现得像绝对元素 - 因此根据上下文，该技术可能无法按预期工作。