CSS 定位终极指南

CSS 中的 position 属性只有几个有效值，但这些值会导致无穷无尽的设计可能性，这使得学习位置相当困难。在本文中，我将分解每个位置值并解释您需要了解的有关它们的所有信息。这甚至包括大多数文章/视频忽略的与位置相关的更晦涩的概念。

静态位置

首先，我们将介绍您可能从未听说过但一直使用的最简单的仓位值，这就是static仓位。static是 position 属性的默认值，本质上只是意味着元素将遵循正常的文档流并根据标准定位规则定位自身。

您未应用位置属性的任何元素都将是static，这意味着您使用的大多数元素都是静态定位的。static定位元素不能应用z-index、top、left、right或bottom属性。

.one {
  position: static;
}

image.png

相对位置

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

.one {
  position: relative;
}

image.png

.one {
  position: relative;
  top: 30px;
  left: 10px;
}

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

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

绝对位置

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

.one {
  position: absolute;
}

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

.one {
  position: absolute;
  top: 0;
  left: 0;
}

现在您可以看到我们的元素已移动到虚线边框的左上角。我使用这个虚线边框来表示整个屏幕，因为默认情况下，位置absolute元素将相对于主体定位自身，因此 atop和left0 表示该元素将出现在主体的左上角。您可以absolute通过将其父元素之一的位置设置为 以外的任何值来更改定位元素所在的元素static。这是最常用的relative位置之一。

.purple-parent {
  position: relative;
}

.one {
  position: absolute;
  top: 0;
  left: 0;
}

通过将紫色父元素设置为的位置，relative我现在强制absolute定位的子元素位于父元素的左上角而不是主体。relative和位置的这种组合absolute非常普遍。

固定位置

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

.one {
  position: fixed;
  top: 0;
  left: 0;
}

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

粘性位置

最终位置值为sticky。这个位置是两者的结合，fixed并且static结合了两者的优点。具有位置的元素sticky将像static定位元素一样工作，直到页面滚动到元素碰到指定的top、left、right或bottom值的点。然后它将像一个固定位置的元素一样，随着页面滚动，直到元素到达其容器的末尾。

.one {
  position: sticky;
  top: 10px;
}

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

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

绝对/固定位置高级

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

.purple-parent {
  transform: translateX(0);
}

.one {
  position: absolute;
  top: 0;
  left: 0;
}

在上面的例子中，我们的紫色父元素有一个static位置，但由于它有一个transform集合，它充当我们absolute定位子元素的容器。

同样的事情也适用于fixed位置元素。这也使得fixed位置元素的滚动行为不再起作用。

.purple-parent {
  transform: translateX(0);
}

.one {
  position: fixed;
  top: 0;
  left: 0;
}

即使我们滚动页面，您也会注意到fixedposition 元素卡在紫色父容器中，因为它有一个transform属性集。这通常不是您想要的，这就是为什么最好总是fixed在顶层定义位置元素以避免这种潜在的错误。

结论

CSS 中的 position 属性只有几个值，但每个值在何时以及如何使用它方面都有很多细微差别。这会导致很多复杂性，但也有很多潜力。

关注柳杉前端公众号，获取最新消息