fixed始终以视口为基准，absolute则相对于最近已定位祖先（position不为static），无则退至初始包含块；前者滚动时固定屏幕，后者随包含块位移而移动。
fixed 和 absolute 都会让元素脱离文档流，但定位参考点完全不同：fixed 始终以视口（viewport）为基准，absolute 则找最近的已定位祖先（position 为 relative、absolute 或 fixed 的父元素），找不到就退到初始包含块（通常是视口，但行为不等价于 fixed）。
为什么 fixed 在滚动时“钉”在屏幕某处，absolute 却会跟着动
因为 fixed 的定位计算始终基于浏览器窗口坐标系——哪怕页面有滚动、父容器有 transform 或 filter，它也不受影响。而 absolute 的 top/left 是相对于其“包含块”计算的，这个包含块一旦随滚动或 CSS 变换发生位移（比如父元素设置了 transform: translateY(10px)），子元素就会跟着偏移。
- 常见错误现象：
absolute元素突然飞到左上角？大概率是父容器没设position: relative，导致它直接相对定位，且top: 0; left: 0默认生效 - 滚动时消失？父容器高度塌陷（如没设
height或内容为空），absolute元素溢出不可见，但位置其实算对了 -
fixed在 iOS Safari 旧版本（iOS 12–14）中“粘不住”，尤其在软键盘弹出或地址栏收放时，视口理解错乱；iOS 15+ 已基本修复
什么时候必须用 fixed，不能用 absolute 替代
当元素需要无视页面结构、始终锚定在屏幕固定位置时，fixed 不可替代。典型场景包括返回顶部按钮、全局导航栏、悬浮客服入口。
- 用
absolute实现“右下角按钮”？风险极高：只要父容器加了transform、perspective或filter，它立刻变成相对该容器定位，按钮直接错位甚至消失 -
fixed的inset属性（如inset: 20px auto auto 20px）比写top/right/bottom/left更简洁，且支持逻辑属性（inset-inline-start等），适配 RTL 布局 - 注意：
fixed元素无法被父级的overflow: hidden截断，但会被transform创建的新层叠上下文影响 z-index 层级
absolute 的“最近已定位祖先”到底怎么找
不是看 DOM 层级最近，而是按祖先链向上搜索第一个 position 值不为 static 的元素。这个过程不关心该祖先是否设置了 top/left，只要写了 position: relative（哪怕没偏移），它就成为定位上下文。
- 常见陷阱：只给父容器加
position: relative，却忘了它本身高度为 0（比如子元素全absolute），导致视觉上“看不见”子元素——其实子元素定位正确，只是父容器没撑开空间 -
position: sticky不参与这个查找逻辑，它不算“已定位祖先” - 如果所有祖先都是
static，absolute会回退到初始包含块（initial containing block），即根元素的尺寸范围，但它的定位原点仍受的border、padding影响，和fixed的纯视口原点不同
真正容易被忽略的是：fixed 的稳定性依赖浏览器对视口的正确定义，而 absolute 的灵活性恰恰来自它对上下文的敏感——这不是缺陷，是设计使然。选哪个，先问清楚：你要锚定“屏幕”，还是锚定“某个容器”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
