如果不存在 position: static; 会怎样？

所有浏览器中的所有元素都以默认定位值static开始。您很少会在实际样式表中看到它，因此这个词可能并不熟悉。这也没什么大不了的，这个词本身对理解它的含义并没有什么帮助。您可能会认为它使元素变得粘性，就像您将气球摩擦在头上并粘在墙上一样（静电）。实际上，这意味着元素将像往常一样落入文档流中，这与其他可以将元素从自然文档流中移除的定位值不同。

现在假设您将某个元素处于其默认的静态状态，并将其设置为position: relative;。会发生什么？仅通过更改/设置该值本身，什么也不会发生。它出现在更改之前完全相同的位置。发生变化的是以下三件事

1. 您现在可以使用 top/right/bottom/left 值来微调元素的位置。但是，元素的原始位置仍将被元素占据（就像仍然存在一个原始元素的“幽灵”占用空间）。
2. 元素现在将遵循 z-index 属性，该属性控制在重叠情况下哪个元素应该显示在顶部。
3. 如果元素具有绝对定位的子元素，则这些子元素现在将相对于此元素绝对定位。

因此，相对定位启用了一些功能和属性，但本身并没有做太多事情。那么，如果所有元素都以position: relative;而不是position: static;开始会怎样呢？

优点

如果所有元素都以相对定位开始，那么以上三点您将自然而然地拥有。您的 top/right/bottom/left 值将按您预期的那样开箱即用。Z-index 也“正常工作”。定位上下文始终限制在下一个父元素，这在逻辑上是有道理的。

我认为总体而言，CSS 的可理解性得到了提升。

缺点

最值得注意的是，始终将定位上下文限制在父元素上是有限制的。假设您希望将元素定位在页面右上角，而不管元素在标记中出现的位置。如果元素嵌套在层次结构中，这将很困难。您需要为每个父元素重置该定位上下文。这意味着将它们重置回position: static;，并在此过程中丢失相对定位的所有好处。=(

如果自然相对位置成为现实，我认为我们需要一种不同的方法来处理定位上下文。可能像

/* Not real code */

#parent-element {
  context: inherit | pass | accept;
}

如今的做法

将意味着

* {
  position: relative;
}

所以……

这可能不会发生。这将是一个非常糟糕的重大更改，其收益有限/存疑。也很难说我们最终会平均做更多的事情：设置相对位置或重置定位上下文。我只是认为这是一个值得思考的有趣话题。