position的四种取值中，absolute、fixed和sticky（触发时）脱离文档流，relative和static不脱离；absolute导致父容器高度坍缩且兄弟元素无视其存在，relative则保留原占位。
position 的四种取值如何影响文档流
元素是否脱离原来位置，取决于 position 的具体值。只有 position: absolute、position: fixed 和 position: sticky（在触发条件下）会让元素脱离文档流；position: relative 不脱离，只是视觉偏移。
-
static（默认）：完全参与文档流，top/left等偏移属性无效 -
relative：仍占据原位置空间，偏移后其他元素不填补空缺 -
absolute：脱离文档流，不再占据空间，定位参考其最近的 已定位祖先（即position值不为static的祖先） -
fixed：脱离文档流，定位参考视口（viewport），滚动时固定不动
为什么 absolute 元素“消失”了原有占位
因为浏览器在布局阶段会跳过 absolute 元素的常规流尺寸计算——它不参与父容器的 height 自适应、不触发 margin 折叠、也不影响兄弟元素的排列顺序。
- 父容器若没有显式设置
height，且子元素全为absolute，父容器高度可能坍缩为0 - 兄弟元素会像它不存在一样排布，造成“元素不见了”的错觉
- 若未设置
top/left等偏移，absolute元素会停留在原本文档流中的坐标（即top: 0; left: 0相对于其定位上下文），但该位置已无流内占位
relative 和 absolute 在偏移行为上的本质区别
relative 是“挪动自己，但给原来的位置留个坑”；absolute 是“直接搬走，原地不留痕迹”。这个区别常被误认为只是“有没有脱离”，其实更关键的是对周围元素的影响方式。
-
relative元素的margin仍可与相邻块级元素发生折叠 -
absolute元素的margin完全失效（不参与任何折叠，也不推挤其他元素） -
z-index对两者都生效，但absolute更容易因层叠上下文缺失导致遮挡异常
.box {
position: relative;
top: 20px;
background: #eee;
}
/* 页面中它原来的位置仍被保留，下方元素不会上移 */
sticky 定位为何有时像 relative、有时像 fixed
position: sticky 是条件性脱离：它在“未触发”时表现和 relative 完全一致；一旦滚动到设定的临界点（如 top: 0），就切换为类似 fixed 的行为——脱离文档流、相对视口固定。
立即学习“前端免费学习笔记（深入）”；
- 必须配合
top、bottom、left或right才有效，否则退化为relative - 其定位上下文不是最近已定位祖先，而是包含块（containing block），且受父容器
overflow影响（如overflow: hidden会阻止 sticky 生效） - 不支持
transform父容器内的正确粘性行为（部分浏览器下会失效）
.header {
position: sticky;
top: 0;
background: #fff;
z-index: 10;
}
/* 滚动前它在正常流中；滚动到顶部时吸附，下方内容从它底下流过 */
脱离文档流不是“消失”，而是布局引擎彻底忽略该元素的存在。真正容易被忽略的，是 absolute 元素对其父容器高度计算的归零效应，以及 sticky 在复杂嵌套或 transform 场景下的兼容性断裂。
