CSS中的position属性只有几个有效值，但由此产生的无穷无尽的设计可能性使得学习定位变得相当困难。 在本文中，我将分解每个位置值并解释您需要了解的有关它们的所有信息。
静态位置 静态位置
首先，我们将介绍您可能没有听说过但仍在使用的最简单的位置值，即静态位置。 static 是position 属性的默认值，本质上只是意味着元素将遵循正常的文档流并根据标准定位规则定位自身。 任何未设置位置属性的元素都是静态的，这意味着您使用的大多数元素都是静态定位的。 静态定位的元素不能应用 z-index、top、left、right 或 Bottom 属性。
相对位置 相对位置
下一个最简单的位置类型是相对位置。 相对定位元素的工作方式与静态定位完全相同，但您现在可以向它们添加 z-index、top、left、right 和 Bottom 属性。 如果您在不设置任何此额外属性的情况下使元素相对定位，您会注意到它看起来与静态定位的元素完全相同。 这是因为相对定位的元素也遵循正常的文档流，但您可以使用顶部、左侧、右侧和底部属性来倾斜它们。
设置偏斜
从前面的示例中，您可以看到，当没有定义额外的属性时，元素的行为类似于静态。 但是，一旦添加了 left 或 top 等属性，您就可以通过这些 top、left、right 和 Bottom 属性看到元素本身相对于其正常位置的倾斜。 但是，您会注意到这种倾斜不会影响其他元素。 这是因为所有其他元素都假设相对定位的元素没有倾斜，并且它们根据相对定位的元素静止的位置来确定其位置。
现在，相对位置本身并没有那么有用，因为您通常不希望在不与元素周围的所有元素进行通信的情况下倾斜元素。 相对位置的主要用例是设置元素的 z-index，或者作为绝对定位元素的容器，我们接下来将讨论这一点。
绝对位置 绝对位置
绝对位置是元素从正常文档流中完全删除的第一个位置。 如果您给一个元素绝对定位，则所有其他元素的行为将如同绝对定位的元素甚至不存在一样。
可以看出，元素二和元素三的布局就好像元素一从未存在过一样。 你们都会注意到第一个元素不再填充整个长度。 这是因为绝对定位元素的长度默认为手动长度，而不是像 div 那样的全宽度。 另外，默认情况下，绝对定位的元素会将其自身定位在文档中，如果它是静态元素，则通常会呈现该文档，但我们可以使用 top、left、right 和 Bottom 属性来修改它。
现在你可以看到我们的元素连接到了红色边框的左上角。 我使用这个蓝色边框来表示整个屏幕，因为默认情况下，绝对位置元素将相对于主体定位自身，因此底部和侧面为 0 意味着该元素将出现在主体的左上角。 您可以通过将其父元素之一的位置设置为除静态以外的任何位置来修改绝对定位元素所在的元素。 这是使用相对位置最常见的地方之一。
通过将红色父元素设置为相对位置，绝对定位的子元素位于父元素的左上角，而不是 Body。 这种相对位置和绝对位置的组合尤其常见。
固定位置 固定位置
现在我们来看看一个较少使用的位置，即固定位置。 固定位置有点像绝对位置，因为它将元素从文档流中删除，但固定位置元素始终相对于屏幕定位css容器，无论其父元素在哪里。
如您所见，我们的元素之一固定在页面的左上角。 您会注意到，当您滚动页面时，无论您滚动到何处，它都会粘在页面的左上角。 这是固定和绝对之间的主要区别。
粘性位置 粘性位置
最后一个是较新的粘性位置。 该姿势是固定姿势和静态姿势的结合，结合了两者的优点。 具有粘性位置的元素将充当静态定位元素，直到页面滚动到该元素遇到指定的底部、左侧、右侧或顶部值的点。 然后它会像固定位置元素一样滚动，直到元素到达其容器的末尾。
首先，您会注意到元素位于文档流中的正常位置，就好像它是静态的一样。 一旦页面滚动到元素底部距离页面底部 10px 的位置，它也会粘在页面底部，就像处于固定位置一样。 这仍将继续css容器，直到元素到达红色父容器的顶部，在这种情况下，它将停止随页面滚动。
粘性位置非常适合随页面滚动的导航栏、长列表中的标题以及许多其他用例。
关于绝对/固定位置的另一件事
现在，您需要了解关于固定和绝对定位元素的一件事，因为它可能会导致一些奇怪的、难以发现的错误。 绝对定位的元素将使用第一个具有非静态位置（non-static）的父元素作为其容器来偏转自身，并且如果没有父元素具有除 static 之外的位置值，则它将默认为 Body。 我们已经知道这一点，但这并不是定义父容器的唯一方法。 绝对定位的元素还将检测设置了变换、过滤器或透视属性的父元素。 如果在父级上找到其中任何一个，它将使用该父级作为容器。
在前面的计数器示例中，我们的红色父元素是静态位置，但由于它具有转换属性，因此它将充当我们绝对定位的子元素的容器。 绿色袋子将其视为定位的父容器。
终于：
希望大家能够掌握这个定位方法，避免在开发中踩坑！ 谢谢阅读！
发表评论