定位

njr大约 4 分钟约 1123 字

为什么会有 positon 定位

HTML 中每个元素都是盒子，布局就像搭积木一样，从上往下挨个堆盒子，就能完成各式各样的页面，然而多实现几个页面就会发现：文档流中任意一个元素位置调整都会影响后面的元素。

这种布局方式称为标准流。它按从左到右、从上到下布局页面，互相不存在层叠现象。

这种布局方式无法实现「元素层叠」效果，如果希望元素跳出文档流，应该如何做？

有一种脱离文档流的解决办法就是浮动，但浮动规则的局限性很大，它会向左上角或右上角靠过去，然而这两个方向并不是布局的全部。日益增长的网页复杂度，和落后的 CSS 布局方式之间的矛盾越来越大，让定位需求变得越来越复杂。

在开发中，常见的定位需求有如下几个：

第一种需求：可以使用 relative 定位。

首先设置元素的 position 为 relative，让元素准备偏移，此时从视觉上来看它并没有发生任何变化。

接下来设置 top、right、bottom、left 来让元素偏移。

.relative-box {
  position: relative;
  top: 20px; /* 元素上边界与它原本位置的上边界距离20px，其他类似 */
}

注意

第二种需求：使用 absolute 定位。

想要设置某个元素相对于某个祖先级元素容器定位，这就意味着元素不被限制在父容器内，因此浮动是肯定不行的（浮动只能在父容器里作威作福）。这就需要一种完全脱离文档流的定位方式：positon: absolute。

不再区分这个元素是块级元素还是行内元素，它的父容器会将它视为不存在，即：绝对定位元素不占据空间。

首先设置元素的 position 为 absolute，然后对它的祖先级元素容器设置标识 position: relative，这样就可以让它可以相对于被标识的元素定位，最后通过 top right bottom left 来让该元素在标识容器内偏移。

提示

绝对定位元素相对于最近的非 static 祖先元素定位（开发中一般标记为 relative）。当这样的祖先元素不存在时，则相对于视口定位。

第三种需求：使用 fixed 定位。

这种定位方式会讲元素移出正常文档流，并且它是相对于**屏幕视口（文档的可视区域）**来指定元素位置。元素的位置在屏幕滚动时不会改变。

首先为元素设置 position: fixed，这时候必须为该元素设置宽高，最后通过 top right bottom left 来让该元素偏移。

.fixed {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 20px;
  height: 20px;
}

提示

当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。

第四种需求：使用 sticky 定位。

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：

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

在屏幕视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到屏幕回滚到阈值以下。常用来做吸顶效果。

	脱离标准流	定位元素	绝对定位元素	定位参考对象
`static`	否	否	否	无
`relative`	否	是	否	元素原来的位置
`absolute`	是	是	是	最近的定位祖先元素
`fixed`	是	是	是	视口