absolute定位会脱离文档流，relative不脱离；fixed相对于视口固定，sticky在临界点前相对文档流、后转为固定；脱离流元素仍可交互但需注意遮挡与可访问性问题。
absolute 定位会脱离文档流
是的，position: absolute 会让元素完全脱离文档流——它不再占据原来的空间，后续元素会“无视”它的存在，直接向上或向前填充位置。
常见错误现象：
- 父容器高度塌陷：当子元素全设为
absolute，父元素没有其他流内内容时，height可能变成0 - 文字/按钮被“吞掉”：本该在某段文字下方的
absolute图标，结果叠在文字上，因为文字没给它留空间
使用场景建议：
- 弹窗、下拉菜单、tooltip 等需要精确坐标且不干扰主布局的浮层
- 装饰性图标（如角标
.badge）叠加在卡片右上角 - 配合
transform做微调动画，比改top/left更利于性能
relative 定位不脱离文档流
position: relative 只是让元素在原位置“偏移”，但它原本占的空间还在，后续元素照常排布，不会挤上来。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 偏移用
top/right/bottom/left，不是移动文档流位置，而是视觉位移 - 它是
absolute子元素的“定位上下文”——只要父级有relative（或absolute/fixed），子级absolute的top: 0就是相对它计算 - 不要滥用：仅需微调对齐（比如让按钮下沉 2px 与文字基线一致）时才用，别用来替代
margin或padding
fixed 和 sticky 都脱离正常流，但行为不同
position: fixed 脱离文档流，且相对于视口定位，滚动时固定不动；position: sticky 表面像 relative，但滚动到临界点后变成 fixed，它仍保留在文档流中（这点常被误解）。
容易踩的坑：
-
fixed元素无法触发父容器的overflow: hidden裁剪（它已跳出父级作用域） -
sticky必须设置top或bottom才生效，且父容器不能有overflow: hidden或transform，否则降级为relative -
sticky在 safari 旧版本中兼容性差，position: -webkit-sticky不能省
非文档流定位元素如何参与交互与可访问性
脱离流的元素（absolute/fixed）默认仍在 dom 顺序中，键盘 tab 仍能聚焦，屏幕阅读器也能读取——前提是没加 visibility: hidden 或 display: none。
但要注意：
- 如果
absolute元素被遮挡（z-index 太低或父级overflow: hidden），视觉上不可见，但焦点和语义仍存在，可能造成可访问性问题 - 用
inset替代top/right/bottom/left（如inset: 10px）更简洁，但 IE 和部分老 android 浏览器不支持 - 避免用
absolute实现整页布局——现代方案优先用flex或grid，它们既可控又保持流式特性
真正难的不是怎么定位，而是判断该不该脱离流。很多“定位失效”问题，根源其实是忘了设定位上下文，或者误以为 relative 会腾出空间。