position的五种取值（static/relative/absolute/fixed/sticky）对应完全不同的定位逻辑：static为默认文档流；relative相对自身原位偏移且仍占空间；absolute脱离文档流，相对于最近非static祖先定位，无则相对于html；fixed相对于视口固定；sticky在滚动中依阈值于relative与fixed间切换。
position 的五种取值不是并列可互换的选项，而是对应五种完全不同的定位逻辑。选错一个，轻则布局错位，重则整个区块“消失”或遮挡交互——尤其 absolute 和 fixed 在没有合适参照物时，会直接相对于视口定位，这点常被忽略。
relative 为什么不能只设 top/bottom 就完事
设置 position: relative 后，top、left 等偏移量是相对于它原本在文档流中的位置计算的，但元素仍占据原始空间。这意味着：
- 其他元素不会因为它的偏移而重新排列，容易造成视觉重叠却查不出原因
- 若只写
top: 20px不写left，它水平位置不变，但垂直下移——这不是“上移”，而是向下偏移（注意坐标系原点在左上） - 它本身不构成“已定位祖先”，所以无法作为子元素
absolute的参照容器，除非显式加了position: relative（哪怕没偏移）
absolute 定位失效时，大概率缺了已定位祖先
position: absolute 的参照物是「最近的 position 值不为 static 的祖先元素」。如果所有父级都是默认 static，它就直接相对于 <html> 或视口定位——这往往不是你想要的。
- 典型表现：弹窗、下拉菜单突然飞到页面左上角
- 修复方式：给直接父容器加
position: relative（哪怕不设偏移），就能把它“框住” - 注意：
position: sticky的祖先不算“已定位祖先”，它只认relative、absolute、fixed
fixed 在 iOS Safari 上可能“假固定”
position: fixed 理论上永远以视口为基准，但 iOS Safari 对 viewport 缩放、第三方键盘弹出、甚至某些 meta 配置（如 user-scalable=no）敏感，会导致元素错位或随滚动轻微抖动。
立即学习“前端免费学习笔记（深入）”；
- 常见现象：底部工具栏在输入框聚焦后上浮、返回顶部按钮在滚动中短暂消失
- 兼容方案：检测
navigator.userAgent中是否含iOS+Safari，必要时降级为position: sticky并配合top: 0 - 不要依赖高
z-index强行盖住内容——iOS 上过高的 z-index 可能触发渲染层异常
sticky 不是“半 fixed”，它的阈值必须可滚动才生效
position: sticky 的行为由 top/bottom 等阈值和父容器是否可滚动共同决定。它本质是 relative 和 fixed 的自动切换，但切换条件非常具体：
- 父容器必须有明确高度且内容溢出（
overflow: visible不触发 sticky） - 阈值如
top: 10px指的是“当元素顶部距离父容器顶部 ≤ 10px 时，转为 fixed” - 若父容器本身不可滚动（比如没设
height或max-height），sticky 会退化为relative，完全不生效
真正难的不是记住五种值的定义，而是每次写 position 时，脑子里得同步确认三件事：当前元素的文档流状态、它的最近已定位祖先是谁、它的父容器是否满足 sticky 的滚动前提——漏掉任意一条，CSS 就会按它自己的逻辑“自由发挥”。
