最近打算学习前端如何实现瀑布流效果，看到文章里提到 list 作为 item 的容器时可以开启相对定位（position: relative） 。作为一个正在实习的前端八股选手，这两三个月没背八股了，脑子仿佛按了重启，连“相对定位”都只记得是 position: relative。
于是我开始“框框查资料”，结果突然踩到一个盲点：我之前的笔记写的是——position: absolute 的元素是相对于第一个设置了 relative 的父元素定位，但现在发现这个说法其实不太准确。准确来说，绝对定位（absolute）的元素是相对于最近一个“已定位”的祖先元素定位，而“已定位”指的是 position 值不为 static 的元素，也就是可以是 relative、absolute、fixed，甚至是 sticky。
所幸及时发现问题，为我这场“女娲补天式”的秋招康复训练又补上了一块砖。总结完这波，心里更踏实了⬇
1. 绝对定位：position：absolute
-
参照点：当元素设置为
position: absolute;时。- 如果有父级元素： 相对于它的最近已定位（即非
position: static;）祖先元素的内部边界（包括内边距padding）进行定位。 - 如果没有父级元素： 它会相对于初始包含块（通常是HTML文档的根元素
<html>）定位，这通常与视口的左上角对齐。
- 如果有父级元素： 相对于它的最近已定位（即非
-
文档流影响：使用
position: absolute;的元素会从正常的文档流中移除，因此不会影响其他元素的布局。它不占据空间，而是根据指定的位置（通过top、right、bottom、left属性指定）在页面上直接定位。 -
层叠上下文：不同
z-index的元素在同一位置的层叠效果。z-index属性可以控制元素的堆叠顺序，但仅在元素为定位元素（即position不是static）时有效。当多个绝对定位的元素重叠时，它们的显示顺序将由z-index决定。如果未指定z-index，则元素的堆叠顺序将按照它们在HTML中出现的顺序决定（先出现的在下面）。 -
绝对定位生效：
- 要使用绝对定位 (
position: absolute;)，需要指定top、right、bottom、或left属性中的至少一个。这些属性决定了元素相对于其最近的已定位祖先元素的位置。 - 如果不指定这些属性，或者它们的值被设置为
auto，绝对定位的元素将按照它在HTML中的原始位置呈现。即它将处于文档流中它原本应有的位置，但这通常不是使用position: absolute;的预期行为。
- 要使用绝对定位 (
2. 相对定位：position：relative
-
参照点：
- 元素根据其在正常文档流中的原始位置进行偏移。注意：偏移参考的是自己原本的位置，而不是父元素的边界。
-
文档流的影响：即使相对定位的元素被偏移了，它原来在文档流中的位置仍然会影响其他元素的布局。也就是说，尽管元素位置发生了变化，但它对周围元素的布局影响仍然是基于它未偏移前的位置。
-
层叠上下文 相对定位的元素可以通过
z-index在当前的层叠上下文中重新排序，使得开发者可以在元素重叠时控制覆盖关系。 -
相对定位生效：
- 使用
position: relative;后，可以通过top,right,bottom,left这些属性来设置元素的偏移。这些偏移属性告诉浏览器元素应该从它原本的位置移动多远。例如，top: 10px;表示元素应该从它原来位置向下移动10像素。 - 当元素设置为
position: relative;，它的定位是相对于它自己在正常文档流中的初始位置进行的。这意味着元素本身并没有从文档流中移除，它原本占据的空间仍然保留。
- 使用
3. 固定定位position: fixed;
-
参照点：固定定位
position: fixed;的元素相对于视口进行定位，即它们固定在屏幕的某个位置，不随页面滚动而移动。 -
文档流的影响：像绝对定位一样，固定定位的元素也不占据任何文档流的空间，不影响其他元素的布局。
-
层叠上下文：固定定位的元素同样可以使用
z-index控制其在层叠上下文中的顺序。 -
定位生效：通常需要设置
top,right,bottom,left中的一个或多个以固定元素的位置。
4. 黏性定位position: sticky;
-
参照点：粘性定位
position: sticky;的元素是基于用户的滚动位置在其最近的滚动祖先和包含块之间切换定位的。sticky很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。 -
文档流的影响：粘性定位的元素在 "粘" 住之前会正常地占据文档流中的空间，当滚动到特定位置时才固定位置。
-
层叠上下文：粘性定位的元素在粘附时可以使用
z-index控制堆叠顺序。 -
定位生效：必须设置
top,right,bottom,left中的一个或多个以确定元素粘附时的位置，通常top属性最为常用，例如top: 10px;表示元素在视口顶部向下10px的位置开始粘附。
5. 默认属性static
-
参照点：按照在HTML代码中出现的顺序进行显示，并且不会受到其他定位属性（如top、right、bottom或left）的影响。
-
文档流的影响：当一个元素具有static定位时，它将按照文档的正常流程进行渲染。
-
层叠上下文：不受z-index影响，堆叠顺序由在文档书中的位置决定，无法改变。
6. 总结
- 参照点： 绝对定位是相对于最近已定位（即非
position: static;）祖先元素的内部边界（包括内边距padding），无则相对于视口左上角。相对定位是元素根据其在正常文档流中的原始位置进行偏移。固定定位直接相对于视口定位，不随窗口滚动。粘性定位基于用户的滚动位置在其最近的滚动祖先和包含块之间切换定位的。 - 文档流： 遵循正常文档流：默认属性static，相对定位；脱离文档流：绝对定位，固定定位。部分遵循文档流（未达到滚动位置时遵循，达到滚动位置后脱离）：黏性定位。
- 层叠上下文： 受z-index影响：相对定位，绝对定位，固定定位，黏性定位。不受z-index影响：静态定位static。
