position: absolute 不能可靠相对于视口定位，因为它始终相对于最近的已定位祖先元素，仅在无此类祖先时退化为初始包含块（常≈视口），但滚动时仍随文档移动；而 position: fixed 才真正以视口为唯一参考系，滚动不偏移。
绝对定位元素默认不总是相对于视口——只有在没有已定位祖先时才“看起来”像相对于视口，但滚动时会跟着文档动；真想锁死在视口不动，必须用 position: fixed。
为什么 position: absolute 不能可靠地相对于视口定位？
因为 absolute 的定位基准是“最近的已定位祖先”，不是视口本身。如果父级没设 position: relative、absolute、fixed 或 sticky，它才会退到初始包含块（通常是 <html>），而 <html> 的尺寸≈视口大小——但这只是巧合。一旦页面有滚动，absolute 元素会随文档一起滚走，视觉上就“脱离了视口”。
-
absolute元素在无定位祖先时确实参考视口坐标系，但它的位置是静态计算的，不绑定视口滚动行为 - 若中间某层祖先加了
transform或filter，部分浏览器（如旧版 Safari）会强制把absolute降级为相对于该祖先，彻底破坏“视口感” - 移动端双指缩放或横竖屏切换时，
absolute的top/left值仍按布局视口计算，但滚动锚点丢失，容易偏移
用 position: fixed 才真正锚定视口
fixed 是唯一语义上明确“相对于视口”的定位方式，滚动时保持坐标不变，且不受祖先 transform 影响（现代浏览器已基本修复历史兼容问题）。
- 设置
top、right、bottom、left直接对应视口边缘，比如top: 20px; right: 10px就是距顶部 20px、右边缘 10px - 居中场景推荐组合：
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%)—— 这比写死margin更健壮，适配动态宽高 - 注意：若父容器有
transform或perspective，某些 Android WebView 可能降级为absolute，可加will-change: transform或改用 JS 动态监听scroll补偿
absolute + relative 父容器 ≠ 视口定位
常见误解：给父容器加 position: relative 再让子元素 absolute，以为就能“模拟视口定位”。其实这只是把定位上下文限定在父容器内，和视口无关。
立即学习“前端免费学习笔记（深入）”；
- 父容器若高度靠内容撑开，
height: 100vh没生效，那top: 50%就是相对于父容器实际高度，不是视口 - 父容器用了
padding或border，而子元素的top/left是从 padding box 开始算，容易视觉错位 - 想“伪固定”，比如悬浮按钮随滚动出现，又不想用
fixed（怕遮挡内容），得靠 JS 监听scroll+ 动态切position，不能只靠 CSS
真正需要“相对于视口”的场景，比如全局提示框、返回顶部按钮、导航栏吸顶，别绕弯子——直接用 fixed。容易被忽略的是：它默认 z-index 为 auto，多个 fixed 元素之间仍按 HTML 顺序堆叠，该加 z-index 就加，别等被遮住才想起来。
