fixed元素在局部滚动容器中失效，因其定位参考系从视口降级为该容器；正确解法是将其移至body下，或改用position: sticky替代。
fixed元素在局部滚动容器里失效了
position: fixed 元素一旦被包裹在 overflow: auto 或 overflow: scroll 的父容器中，就会“降级”为 relative 定位——它不再相对于视口，而是相对于该滚动容器定位。这不是 bug，是规范行为：fixed 只对根视口生效，但若祖先触发了新的包含块（如设置了 transform、will-change 或非 static 的 contain），浏览器会将其包含块改为该祖先，导致 fixed 失效。
常见现象：.sidebar 设了 position: fixed; top: 0; right: 0;，但放在一个 .panel { overflow-y: auto; height: 400px; } 里，结果它跟着 panel 一起滚动，而不是钉在窗口右上角。
- 最直接的解法：把 fixed 元素从局部滚动容器里移出来，挂到
下（用 JSdocument.body.appendChild(el)或模板中提级） - 如果 DOM 结构不可改，检查父容器是否意外触发了包含块：禁用
transform、will-change、contain: layout paint等属性 - 替代方案：不用
position: fixed，改用position: sticky+top: 0，它天然适配局部滚动容器，且行为更可控
Element UI 表格固定列遮挡横向滚动条
el-table 的 fixed="right" 列实际是绝对定位的独立容器（.el-table__fixed-right），高度设为 100%，但它会覆盖表格主体的横向滚动条区域（.el-table__body-wrapper），造成“看得见、拖不动”。
关键不是 z-index，而是层级错位：滚动条属于 body-wrapper，而 fixed 列盖在它上面，鼠标事件被拦截。
立即学习“前端免费学习笔记（深入）”；
- 给
.el-table__fixed-right加pointer-events: none，再给内部真实内容加pointer-events: auto（仅适用于无交互的纯展示列） - 更稳妥：重设
.el-table__fixed-right的height为calc(100% - 17px)（减去横向滚动条高度），并确保.el-table__body-wrapper的overflow-x: auto优先渲染 - 终极方案：升级到 Element Plus，其
virtual-scroll模式下 fixed 列与滚动逻辑已解耦，基本不冲突
滚动时 fixed 背景图被内容盖住
background-attachment: fixed 在局部滚动容器中失效，本质是父容器触发了层叠上下文或合成层，把背景“锁”在了该容器内，失去穿透到视口的能力。
典型诱因：overflow: hidden、transform: translateZ(0)、filter: blur(0.5px) 或 will-change: transform —— 这些会让父元素变成新渲染层，fixed 背景只能在层内渲染。
- 优先移除这些属性；若必须保留（比如动画需要硬件加速），就把背景移到
上设置 - 更灵活的做法：用伪元素模拟 fixed 效果：
&::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(...) fixed; z-index: -1; } - 注意：伪元素需挂载在不会触发新层叠上下文的节点上，否则同样失效
移动端 Safari 中 fixed 元素滚动卡顿或回弹异常
iOS Safari 对 fixed 定位有特殊限制：当页面存在局部滚动容器（如 div { overflow-y: scroll; -webkit-overflow-scrolling: touch; }）时，fixed 元素可能无法跟随手指拖动同步更新位置，松手后回弹延迟甚至丢失。
这不是 z-index 或样式问题，而是 WebKit 渲染管线对 fixed 元素的合成策略所致。
- 临时缓解：给 fixed 元素加
will-change: transform，强制创建独立图层（但慎用，可能引发内存占用升高） - 更可靠：改用
position: sticky，它在 iOS 上兼容性更好，且能响应局部滚动 - 若必须用 fixed，确保局部滚动容器不设
-webkit-overflow-scrolling: touch（现代 iOS 已默认启用，可直接删掉该声明）
滚动容器和 fixed 的冲突，核心不在“怎么修”，而在“谁该负责定位”。fixed 是视口级契约，一旦放进局部流，就等于撕毁契约——要么把它请回 body，要么换 sticky 接手。很多问题表面是样式，实则是 DOM 层级和渲染上下文的隐式约定被打破了。
