【问题标题】：why not setting default position to relative?为什么不将默认位置设置为相对？
【发布时间】：2016-06-30 13:10:57
【问题描述】：

我最近意识到position: static 是多么无用，除非relative 也可以，否则它不会为您提供任何东西。
实际上我的问题是“为什么不把这一行添加到我们的 CSS 文件中？”

* { position:relative; }

所以我们总是能够轻松地从它的父级定位任何元素absolutely，或者将元素它自身移动left: ... 或在任何方向上都相同。
那么为什么元素默认不定位到relative？

谢谢

【问题讨论】：

如果您想将position: absolute 应用于与其父级的父级相关的元素怎么办？在这种情况下，您必须将 position: static 设置为父级。
这不是你通常会做的事情，它可能会发生一次或两次在完整的布局中，然后你很容易切换回静态 (position: static)
我同意你对display: block 元素的看法，而不是inline 元素。此外，table 相关元素可能会给您带来意想不到的结果。
此外，<li> = display: list-item、<table> = display: table、<span> = display: inline 等
@BillyNate，你能解释更多吗？什么是意想不到的结果？小提琴会有所帮助

标签： css layout css-position

【解决方案1】：

让我们将一些元素置于其默认静态状态并将其设为 position: relative;。仅仅通过改变这个值，什么都不会发生。它出现在与更改之前完全相同的位置。但它确实改变了两件事：

它的原始位置仍将被元素占据（就像原始元素的幽灵仍然在那里占用空间一样）。
如果元素有绝对定位的子元素，它们现在绝对定位在该元素的上下文中。

优势

如果所有元素都以相对定位开始，那么您自然会拥有以上所有两项。您的 top/right/bottom/left 值就像您假设它们开箱即用一样工作。 Z-index 也“正常工作”。定位上下文总是被限制在下一个父元素上，这是合乎逻辑的。

缺点

最值得注意的是，总是将定位上下文限制在父元素上是有限制的。假设您想将一个元素放置在页面的右上角，而不管该元素出现在标记中的什么位置。如果元素被隐藏在层次结构中，那将很难。您需要为每个父元素重置该定位上下文。这意味着将它们设置回 position: static;，并在此过程中失去相对定位的所有好处。

【讨论】：

如果你想在页面顶部放置一些元素，你仍然可以使用 Fixed 并避免重置所有父元素。是的，fixed 和 absolute 之间存在差异，absolute 会受到滚动的影响，因为附加到 body 而不是 viewport，但这是这样的边缘情况，它不能被视为严重的劣势。跨度>

【解决方案2】：

static 定位是默认设置，因为它根本不会“干扰”页面上任何其他元素的定位。从这个意义上说，它是元素可以具有的破坏性最小的状态。此外，当我们谈论网页渲染时，这是一项非常昂贵且复杂的操作 - 仅绘制包含大量静态元素的页面比其他定位元素更快。现代浏览器在这方面肯定是非常先进的，但它肯定在 20 年前对浏览器发挥了作用。

为了方便：想象一下动态页面上的一个元素，你想绝对定位它。您知道要将其定位到哪个元素，但您不知道中间可能有多少层。使用静态定位，您只需在锚元素上声明 position:relative。由于所有元素都具有相对定位，因此您需要以某种方式重新定位其间的所有元素，这给您带来了困难。

【讨论】：