理解 position 定位HTML 中每个元素都是盒子，布局就像搭积木一样，从上往下挨个堆盒子，就能完成各式各样的页面

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 11 天，点击查看活动详情

为什么会有 positon 定位

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

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

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

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

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

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

注意：

相对定位的元素没有脱离文档流；

相对定位不会影响其他元素；

对非定位元素设置 top 等方向属性是没有效果的。

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

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

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

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

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

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

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

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

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

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

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

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

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