fixed元素被父级压制主因是父容器设置transform、opacity、filter等创建新层叠上下文，使其无法提升为独立合成层；应移除相关属性或将fixed元素挂载到body下。
position: fixed 触发合成层但被父级压制怎么办
fixed 元素本该被提升为独立合成层，避免滚动时重排重绘，但实际常失效——根本原因是父容器存在 transform、opacity、filter 或 will-change 等属性，意外创建了新的堆叠上下文，把 fixed 元素“框死”在父层内。
检查方式：Chrome DevTools → Rendering → 勾选 Layer borders，如果 fixed 元素没出现绿色边框，说明没真正提层。
- 移除父容器的
transform: scale(1)或opacity: 0.99（哪怕只是为兼容加的 hack） - 若必须保留父级
filter，把 fixed 元素用document.body.appendChild()提到 body 下，脱离原 DOM 层级 - 避免给 fixed 元素的父级设
overflow: hidden，它会截断 sticky/fixed 的提升逻辑（尤其旧版 Safari）
滚动中频繁切换 fixed/sticky 导致卡顿
监听 scroll 动态改 element.style.position 是性能黑洞：每次切换都会销毁旧合成层、新建新图层，比单纯重绘还慢。
真实场景比如“导航栏滚动后吸顶”，别用 JS 切换 position 值，改用 CSS 原生能力：
- 优先用
position: sticky，它只在粘住时才建合成层，未粘住时完全不占资源 - 若需兼容老浏览器，用
transform: translateY()模拟位移，配合will-change: transform（仅在滚动开始前 1 帧设置，滚动结束立即清空） - 禁用
top/left配合 fixed 控制位置——它们触发重排，且和 transform 冲突
fixed 元素动画仍掉帧？检查是否真走 GPU
写了 transform: translateX(10px) 却还是卡，大概率是合成层没真正生效。常见陷阱：
- 父容器有
clip-path或mask，会强制子元素合并渲染，GPU 加速失效 - 用了
will-change: transform但没清理，长期占用内存，低端机直接卡死 - 动画元素本身带
background-image且尺寸大，GPU 纹理上传耗时，应压缩或转为 SVG
验证方法：打开 Chrome Layers 面板，拖动页面，观察动画元素是否始终维持绿色独立图层；若图层闪烁或消失，说明被降级。
relative 定位的子元素被拖下水怎么办
position: relative 本身不触发重排，但它常作为 fixed/sticky 的父容器存在——一旦父级因其他样式（如 font-size 变化）触发重排，所有 relative 子元素都会连带重排，哪怕它们自己没动。
- 把高频变动元素（如计数器、状态 badge）从 relative 容器里抽出来，挂到
body或固定定位的兄弟节点下 - 避免在 relative 父级上做字体缩放、行高调整等易触发重排的操作
- 用
transform: scale()替代font-size实现缩放效果，它只走合成，不扰动布局
fixed 定位的性能问题，核心不在“怎么写”，而在“谁把它框住了”——盯着父级样式比盯着自己写的 position: fixed 更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
