相对定位元素仍占位是因为它仅视觉偏移而保留在文档流中，布局位置不变；绝对定位元素不占位且相对于最近非static祖先定位，若无则相对于视口。
相对定位元素为什么“移走了”却还占位？
因为 position: relative 只是视觉偏移：元素仍留在文档流中，原位置像被一个透明盒子牢牢占住。兄弟元素不会挪过去补空——哪怕它 top: 100px 移到了屏幕外，下面的元素还是按它没动时的位置排布。
- 设置
top/left等值后，元素渲染位置改变，但布局位置（layout position）不变 - 父容器高度会包含这个“隐形占位”，不会塌陷
- 子元素设
position: absolute时，参考的是该 relative 元素的**原始边界框**，不是偏移后的位置
绝对定位元素为何总“飞走”？定位参考是谁？
position: absolute 的定位起点不是自身，而是“最近的非 static 祖先”。如果所有父级都是默认 position: static（即没设过定位），那它就直接相对于视口（）定位——这就是为什么没加父容器样式时，它常突然贴到左上角。
- 必须有祖先元素显式设置
position: relative、absolute、fixed或sticky，才能成为定位上下文 - 嵌套多层时，只认离自己最近的那个已定位祖先（哪怕中间隔着几层
static） - 一旦脱离文档流，父容器就“看不见”它了，容易导致高度塌陷
如何用是否占位快速判断该用哪个？
核心看两点：要不要让其他元素“知道它还在那儿”，以及“谁来当坐标系”。
- 需要微调按钮对齐、给 tooltip 做锚点、配合
z-index控制层级 → 用relative（占位 + 视觉偏移） - 要做悬浮菜单、右上角关闭按钮、弹窗遮罩层 → 用
absolute（不占位 + 精确参照） - 想让绝对定位子元素乖乖待在父容器里？父容器必须加
position: relative（哪怕不写top/left）
常见误用与调试技巧
很多布局问题其实不是定位写错了，而是定位上下文缺失或错位。
- 现象：“绝对定位元素飘到页面左上角” → 检查所有祖先是否都为
static，浏览器开发者工具中逐级看computed position - 现象：“父容器高度变成 0” → 因为里面全是
absolute子项，解决办法是加一个普通子元素撑高，或改用display: flex/grid - 现象：“relative 元素偏移后内容被裁剪” → 父容器设置了
overflow: hidden，且top或left用了负值
<div class="card">
<button class="close-btn">×</button>
<p>卡片内容</p>
</div>
<p>.card {
position: relative; /<em> 必须加！提供定位上下文 </em>/
padding: 20px;
border: 1px solid #ccc;
}
.close-btn {
position: absolute;
top: 8px;
right: 8px;
}</p>
真正难的不是记住“relative 占位、absolute 不占位”，而是理解：占位与否，决定了整个布局链路是否断裂。一个没设 relative 的父容器，会让所有后代 absolute 元素失去约束，这种断裂在嵌套深、组件多的项目里极难追溯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
