相对定位元素视觉偏移但保留文档流占位，兄弟元素不填补空隙；绝对定位以最近非static祖先为参考，无则相对于html，需父级设relative提供定位上下文。
相对定位为什么“占位”却看起来移走了？
因为 position: relative 只是视觉偏移：元素仍留在文档流中，原位置像被一个透明盒子牢牢占住。兄弟元素不会挪过去补空——哪怕它 top: 100px 移到了屏幕外，下面的元素还是按它没动时的位置排布。
- 适用场景：微调按钮图标对齐、给 tooltip 做定位锚点、配合
z-index层级微控 - 常见错误：以为加了
relative就能当父容器让子元素绝对定位——不行，必须显式设置position: relative（哪怕不写偏移值）才能成为“已定位祖先” - 注意：
left/top值为负数时，元素可能被裁剪（尤其父容器有overflow: hidden）
绝对定位为何总“飞走”？定位参考是谁？
position: absolute 的定位起点不是自身，而是“最近的非 static 祖先”。如果所有父级都是默认 position: static（即没设过定位），那它就直接相对于 <html> 或视口定位——这就是为什么没加父容器样式时，它常突然贴到左上角。
- 正确做法：想让它相对某个
<div class="card">定位？给这个card加position: relative（无需偏移值，纯作上下文） - 陷阱：嵌套多层时，只要中间某一层写了
position: absolute或fixed，它就会“跳过”更外层的relative，只认离自己最近的那个 - 性能提示：频繁动画用
absolute比relative更轻量（不触发重排），但需手动处理z-index层叠
什么时候该用 relative，什么时候必须用 absolute？
关键看“是否需要脱离文档流”和“谁来当坐标系”。
- 选
relative：要保留原有布局节奏，仅做局部微调；或主动充当子元素的定位容器（此时它本身不能脱离流） - 选
absolute：要做悬浮按钮、下拉菜单、气泡提示、右上角关闭图标；或者需要元素完全不参与父容器高度计算（比如轮播图的指示器） - 典型误用：用
absolute布局整页内容——会导致响应式失效、打印样式错乱、SEO 友好性下降
<div class="card" style="position: relative; padding: 20px;"> <h3>卡片标题</h3> <button style="position: absolute; top: 8px; right: 8px;">×</button> </div>
这段代码里，button 能精准钉在右上角，靠的是 card 的 position: relative 提供了定位上下文——这个细节，漏掉就全乱。
立即学习“前端免费学习笔记（深入）”；
