fixed定位失效主因是父容器触发了新的层叠上下文（如transform、filter），导致fixed相对父容器而非视口；右上角推荐top:12px;right:12px并适配header高度；z-index被盖住需检查层叠上下文分裂，优先将元素移至body末尾；iOS Safari闪动应改用sticky或加GPU加速。
fixed定位为什么没生效？
常见现象是元素写了 position: fixed 却还在文档流里滚动，或位置飘忽不定。根本原因通常是父容器用了 transform、perspective 或 filter（哪怕值是 none），这些属性会创建新的层叠上下文，使 fixed 相对该容器而非视口定位。
- 检查祖先元素是否带
transform: translateZ(0)、filter: blur(0)等“隐形陷阱” - 用浏览器开发者工具的“Computed”面板看
position实际计算值，确认fixed是否被降级为absolute - 若必须保留 transform，改用
position: absolute+top: 0; right: 0，并确保父容器设position: relative
右上角坐标怎么设才不遮挡内容？
top: 0; right: 0 是最简方案，但实际常需留白或适配滚动条。关键不是“贴边”，而是“与用户操作区保持安全距离”。
- 基础偏移推荐：
top: 12px; right: 12px（兼顾小屏和触控热区） - 若页面有固定 header，用
top: calc(12px + 64px)避免重叠（64px 换成你的 header 高度） - 避免用
margin调整位置——fixed元素的 margin 不影响布局，纯属视觉错觉 - 移动端要考虑横屏时 viewport width 变化，
right值过大可能被截断，建议上限控制在20px内
z-index 层级总被盖住怎么办？
挂件被其他元素（比如弹窗、导航栏、广告位）压住，不是 z-index 数值不够大，而是层叠上下文分裂了。
- 先确认挂件自身没有被包裹在低 z-index 的父容器里（例如某个
div设了z-index: 1，它内部所有fixed子元素都受限于这个上下文） - 直接给挂件设
z-index: 2147483647（CSS 最大整数）能解决 90% 场景，但治标不治本 - 更稳妥的做法：把挂件节点移到
最末尾，脱离所有业务组件的层叠上下文干扰 - 注意 Safari 对
z-index: auto的处理更严格，显式声明z-index: 1比不写更可靠
fixed 在 iOS Safari 上闪动或错位？
iOS 15+ 的 Safari 对 fixed 定位做了渲染优化，但代价是某些场景下首屏渲染或滚动中会短暂失效。
- 典型触发条件：页面有
overflow: scroll的容器 + 挂件同时监听scroll事件 - 临时修复：加
backface-visibility: hidden或will-change: transform强制开启 GPU 加速（慎用，可能引发内存升高） - 真正稳定方案：检测 iOS Safari，改用
position: sticky; top: 0; right: 0并配合一个高z-index的 wrapper 容器 - 别信“加
-webkit-transform: translateZ(0)就行”——这在 iOS 16.4 后反而更容易触发重绘异常
fixed 定位看着简单，但每个浏览器对“视口”的定义其实有细微差别；尤其当页面存在动态插入内容、第三方 SDK 注入样式、或使用 CSS-in-JS 库时，right 和 top 的计算结果可能被意外覆盖。上线前务必在真机上滑动测试三遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
