css 定位元素为什么会脱离原来的位置_通过 position 工作机制理解布局变化_网络技术

position的四种取值中，absolute、fixed和sticky（触发时）脱离文档流，relative和static不脱离；absolute导致父容器高度坍缩且兄弟元素无视其存在，relative则保留原占位。

元素是否脱离原来位置，取决于 positi

on 的具体值。只有 position: absolute、position: fixed 和 position: sticky（在触发条件下）会让元素脱离文档流；position: relative 不脱离，只是视觉偏移。

因为浏览器在布局阶段会跳过 absolute 元素的常规流尺寸计算——它不参与父容器的 height 自适应、不触发 margin 折叠、也不影响兄弟元素的排列顺序。

父容器若没有显式设置 height，且子元素全为 absolute，父容器高度可能坍缩为 0
兄弟元素会像它不存在一样排布，造成“元素不见了”的错觉
若未设置 top/left 等偏移，absolute 元素会停留在原本文档流中的坐标（即 top: 0; left: 0 相对于其定位上下文），但该位置已无流内占位

relative 是“挪动自己，但给原来的位置留个坑”；absolute 是“直接搬走，原地不留痕迹”。这个区别常被误认为只是“有没有脱离”，其实更关键的是对周围元素的影响方式。

.box {
  position: relative;
  top: 20px;
  background: #eee;
}
/* 页面中它原来的位置仍被保留，下方元素不会上移 */

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 场景下的兼容性断裂。