父元素 overflow:auto 时 fixed 定位失效是标准行为，不是 bug；因触发新包含块，fixed 元素降级为相对该祖先定位，正确解法是移至 body 下或改用 position: sticky。
父元素 overflow:auto 时 fixed 定位失效是标准行为，不是 bug
浏览器规范明确要求：position: fixed 的定位参考系必须是视口（viewport），但一旦父元素触发了「新包含块」（new containing block），fixed 元素就会降级为相对于该祖先定位——这在 overflow: auto、transform、will-change、backdrop-filter 或 contain: layout paint 等属性存在时就会发生。
典型现象：把一个 position: fixed; top: 0; right: 0; 的按钮塞进 .panel { overflow-y: auto; height: 400px; } 里，它会跟着 panel 滚动，而不是钉在窗口右上角。
- 这不是 IE 或某个浏览器的兼容问题，Chrome/Firefox/Safari 均按规范执行
-
z-index无效——即使子元素z-index: 999，只要包含块变了，定位就失效 - 用
getBoundingClientRect()测出来的 top/left 是相对父容器的，不是视口的
最稳妥解法：把元素移出滚动容器，挂到 body 下
DOM 结构可改时，这是唯一能 100% 复现原生 fixed 行为的方式。不需要计算偏移，不依赖 JS 监听尺寸变化，也不怕 border-radius 或 backdrop-filter 干扰。
示例操作：
const el = document.querySelector('.tooltip');
document.body.appendChild(el);
注意两点：
- 移出后需手动同步显隐状态（比如监听父容器 hover 或 focus）
- 若原元素有内联样式或依赖父级 CSS 变量，要提前提取或重设
替代方案：用 position: sticky 替代 fixed
如果目标是「随滚动进入视口后吸附顶部/底部」，sticky 是更自然的选择，且天然兼容局部滚动容器。
关键点：
-
top: 0仅在元素到达滚动容器顶部时生效，不会脱离文档流 - 父容器必须有明确高度或内容撑开，否则
sticky不触发 - 不支持
bottom+overflow-y: auto组合（部分旧版 Safari 有兼容问题）
示例：
.sticky-header {
position: sticky;
top: 0;
z-index: 10;
}
JS 动态模拟 fixed 效果时，这些坑必须绕开
当 DOM 无法提级、又必须用 fixed 视觉效果时，JS 计算位置是常见做法，但极易翻车：
-
getBoundingClientRect()返回的是相对于视口的坐标，但若父容器有transform，结果会含偏移 —— 改用el.offsetParent.getBoundingClientRect()更可靠 - IE11 下
border-radius会干扰fixed渲染（哪怕父容器没设overflow），必须移除或改用clip-path - 滚动中频繁设置
style.left/top会触发重排，建议用requestAnimationFrame节流 - 移动端 Safari 对
fixed在overflow-scrolling: touch容器里支持不稳定，优先用sticky
真正难处理的不是怎么写 JS，而是怎么判断「什么时候该用 JS」——多数情况下，结构提级比动态计算更稳、更轻、更易维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
