绝对定位元素脱离文档流，需父容器设position: relative作为参考；fixed相对于视口，注意高DPI和ios兼容性；sticky是相对与固定的混合，需设top/bottom且父容器不能有overflow:hidden或transform。
position: absolute 会脱离文档流，但能精准控制位置
绝对定位让元素完全脱离正常布局流，父容器必须设置 position: relative 才能作为其定位参考。否则它会逐级向上找最近的已定位祖先，最终回退到 initial containing block（通常是视口），导致在响应式页面中错位。
常见错误现象：top: 0; right: 0 的关闭按钮在小屏下跑到屏幕右上角以外、或被其他层遮挡。
- 务必检查父容器是否设置了
position: relative或position: absolute - 慎用
left/right同时指定；它们会冲突，浏览器按规范忽略right - 配合
transform: translate(-50%, -50%)实现真·居中，比仅靠top/left更可靠
fixed 定位在滚动时保持可见，但需处理 viewport 变化
position: fixed 元素始终相对于视口定位，适合导航栏、返回顶部按钮等。但它不随父容器缩放，也不响应 zoom 或 devicePixelRatio 变化，在高 DPI 设备或 pinch-zoom 操作中容易模糊或偏移。
使用场景：需要常驻屏幕某区域的控件，比如悬浮客服图标、吸顶搜索框。
立即学习“前端免费学习笔记（深入）”；
- 避免对
fixed元素设置width: 100%后再加padding或border—— 容易触发横向滚动条 - 在移动端，
fixed在 iOS safari 中可能失效（如键盘弹出时），可用position: sticky替代部分场景 - 若需适配刘海屏/全面屏，用
env(safe-area-inset-top)补齐顶部留白
sticky 定位是“相对+固定”的混合体，但兼容性需留意
position: sticky 表现为：在滚动到阈值前是 relative，越过阈值后变成 fixed。它不脱离文档流，不影响后续元素布局，非常适合表格表头、侧边栏锚点导航。
容易踩的坑：sticky 必须配合 top、bottom 等偏移值才生效；且父容器不能有 overflow: hidden 或 transform（会创建新的 stacking context 并截断 sticky 行为）。
- IE 完全不支持，edge 16+ 开始支持；如需兼容旧版，得降级为 js 监听 scroll + 切换 class
- 不要给
sticky元素设height: 100vh—— 它只在“粘住”时生效，高度仍由内容决定 - 多个
sticky元素堆叠时，z-index 优先级可能出乎意料，建议显式声明
定位 + 自适应的关键在于“锚点可控”，而非强行拉伸
很多人误以为自适应就是让元素随窗口缩放，其实更关键的是：定位锚点是否稳定、是否随容器尺寸变化而合理偏移。比如一个气泡提示框，不应靠 width: 100% 填满父容器，而应通过 max-width 限制宽度、用 left 和 transform 控制位置，再配合 media query 调整偏移量。
性能影响：频繁读写 offsetTop / getBoundingClientRect() 触发重排；而纯 css 定位（如 top: 5%）由渲染引擎优化，更轻量。
- 避免在媒体查询中反复修改
top/left数值，改用 CSS 自定义属性 + calc() 动态计算 - 慎用
position: absolute配合%单位 —— 它基于包含块宽高，但包含块若无明确尺寸（如 flex item 未设flex-basis），结果不可控 - 移动端慎用
vh单位做定位基准，Safari 在地址栏收起/展开时会重算，造成跳动
:root { --tip-offset-x: 1rem; } .tooltip { position: absolute; left: calc(50% + var(--tip-offset-x)); transform: translateX(-50%); } @media (max-width: 768px) { :root { --tip-offset-x: 0.5rem; } }定位本身不解决自适应，它只是把“在哪里放”这件事交给你手动控制；真正适配靠的是锚点选择是否合理、偏移是否可维护、以及是否预留了响应式干预的入口。