position: static完全不干扰文档流且忽略偏移属性，position: relative虽视觉偏移但仍保留原始占位、参与布局计算并可作为子absolute元素的定位上下文。
static 完全不干扰文档流，relative 表面偏移但原占位仍保留——这是最常被误读的差异点。
static 元素根本不响应偏移属性
只要没显式声明 position，元素默认就是 static。此时设置 top、left、z-index 等属性完全无效，浏览器直接忽略。
常见错误现象：给按钮加了 top: 20px 却没动，就是因为没设 position: relative。
- 它始终按 HTML 顺序自然排列，块级元素独占一行，内联元素水平排列
- 父容器高度由它撑开，其他元素会紧随其后布局
- 不能作为
absolute子元素的定位上下文（因为不是“已定位祖先”）
relative 元素偏移但不释放原始空间
relative 的本质是“挪位置但留坑”。元素视觉上移动了，但它在文档流中原本占的那块地方还在，后续元素照常排布，不会填补空缺。
典型使用场景：微调某个图标位置、为下拉菜单提供定位锚点、配合 z-index 控制叠层顺序。
- 必须显式声明
position: relative才能启用top/left等偏移 - 偏移量基于自身未定位前的左上角计算，不是父容器边界
- 它能成为
absolute子元素的包含块——这点极其关键，很多布局失效就卡在这里
为什么搞混 static 和 relative 会导致布局错乱？
根本原因在于对“脱离文档流”的误解。很多人以为加了 top 就等于脱离，其实只有 absolute 和 fixed 才真正脱离；relative 只是“视觉位移”，文档流里的占位符纹丝不动。
容易踩的坑：
- 给多个
relative元素叠加top，结果发现它们互相重叠，但下方内容没上移——因为每个都还占着原来的位置 - 把
absolute子元素挂在一个static父容器下，结果它跑到body里定位去了 - 用
relative做“隐藏式占位”，比如只设top: -9999px想让元素不可见又不塌陷，但实际仍影响布局高度
真正要“腾出空间”，得用 absolute 或 visibility: hidden；想“挪而不扰”，才用 relative。文档流是否保留，是判断该用哪个的第一道门槛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
