CSS - Position完全手册

CSS 中的 position 属性只有几个有效值，但这些值会导致无穷无尽的设计可能性，这使得学习定位相当困难。 在本文中，我将分解每个位置值并解释您需要了解的有关它们的所有信息。

静态位置 Static Position

首先，我们将介绍您可能从未听说过但一直使用的最简单的位置值，那就是静态位置。 static 是 position 属性的默认值，本质上只是意味着元素将遵循正常的文档流并根据标准定位规则定位自身。您没有设置位置属性的任何元素都是静态的，这意味着您使用的大多数元素都是静态定位的。 静态定位元素不能应用 z-index、top、left、right 或 bottom 属性。

相对位置 Relative Position

下一个最简单的位置类型是相对位置。 相对位置元素的工作方式与静态位置完全相同，但您现在可以为其添加 z-index、top、left、right 和 bottom 属性。 如果您在不设置任何这些额外属性的情况下使元素相对定位，您会注意到它看起来与静态定位元素完全相同。 这是因为相对定位的元素也遵循正常的文档流，但您可以使用 top、left、right 和 bottom 属性来偏移它们。

从上面的示例中，您可以看到当没有定义额外的属性时，元素的工作方式与静态一样。 但是，一旦添加了 left 或 top 之类的属性，您可以看到元素通过这些 top、left、right 和 bottom 属性相对于其正常位置偏移了自身。 但是，您会注意到，这个偏移不会影响到其它元素。 这是因为所有其他元素都假定相对定位元素没有偏移，并且它们根据相对定位元素在静态时的位置来确定它们的位置。

现在，它自己的相对位置并没有那么有用，因为您通常不想在不移动元素周围的所有元素的情况下偏移元素。 位置相对的主要用例是设置元素的 z-index，或者用作绝对定位元素的容器，我们将在下面讨论。

绝对定位 Absolute Position

绝对位置是从正常文档流中完全移除元素的第一个位置。 如果你给一个元素绝对位置，所有其他元素都会表现得好像绝对定位的元素甚至不存在一样。

可以看到，元素二和三的布局就好像元素一从未存在过一样。 您还会注意到第一个元素不再填满整个宽度。 这是因为绝对定位元素的宽度默认为自动，而不是像 div 那样全宽。 此外，默认情况下，绝对定位元素会将自身放置在文档中，如果它是静态元素，它通常会呈现，但我们可以使用 top、left、right 和 bottom 属性来更改它。

现在您可以看到我们的元素已移动到灰色边框的左上角。 我使用这个灰色边框来表示整个屏幕，因为默认情况下，绝对位置元素将相对于Body定位自身，因此顶部和左侧为 0 表示该元素将出现在body的左上角。 您可以通过将其父元素之一的位置设置为静态以外的任何值来更改绝对定位元素所在的元素。 这是使用相对位置最常见的地方之一。

通过将灰色父元素设置为相对位置，绝对定位的子元素位于父元素的左上角而不是Body。 这种相对位置和绝对位置的组合使用非常普遍。

固定位置 Fixed Position

现在我们来到一个较少使用的位置，即固定位置。 固定位置有点像绝对位置，因为它从文档流中删除元素，但固定位置元素总是相对于屏幕定位，无论其父元素在什么位置。

如您所见，我们的一个元素固定在页面的左上角。 您还会注意到，当您滚动页面时，无论您滚动到哪里，它都会停留在页面的左上角。 这是固定和绝对之间的主要区别。

粘性位置 Sticky Position

最后一个是较新的粘性位置。 这个位置是固定位置和静态位置的结合，并结合了两者的优点。 位置为粘性的元素将充当静态定位元素，直到页面滚动到该元素碰到指定的顶部、左侧、右侧或底部值的点。 然后它将像一个固定位置的元素一样，随着页面滚动，直到元素到达其容器的末尾。

首先，您会注意到一个元素在文档流中处于其正常位置，就好像它是静态的一样。 一旦将页面滚动到一个元素的顶部距离页面顶部 10px 的位置，它就会像位置固定一样粘在页面顶部。 这将一直持续到元素到达紫色父容器的底部，在这种情况下它将停止与页面一起滚动。

粘性位置是随页面滚动的导航栏、长列表中的标题以及许多其他用例的完美位置。

One More Thing about Absolute/Fixed Position

现在，您需要了解关于固定和绝对位置元素的一件事，因为它可能会导致一些奇怪的、难以发现的错误。 绝对定位的元素将使用第一个具有非静态位置(非static)的父元素作为其容器来偏移自己，如果没有父元素具有静态以外的位置值，它将默认为Body。 我们已经知道了，但这并不是定义父容器的唯一方法。 绝对定位元素还将检查设置了transform, filter, or perspective属性的父级。 如果在父级上找到其中任何一个，它将使用该父级作为容器。

在上面的例子中，我们的灰色父元素是一个静态位置，但由于它有一个transform属性，所以它将充当我们绝对定位子元素的容器。绿色盒子将它视为定位的父容器。

最后：

希望大家都可以掌握这些定位方式，避免在开发中踩到坑！感谢阅读！