ios safari中fixed挂件“失效”实为被降级为absolute，主因是祖先元素的transform/filter/perspective创建新层叠上下文，使其相对祖先而非视口定位；需逐级检查computed样式、移至body下、用env(safe-area-inset-bottom)适配键盘与圆角。
直接给元素设 position: fixed，再配 right 和 bottom 偏移量即可实现右下角固定，但 iOS Safari、transform 祖先、z-index 分裂这三类问题会直接导致它“看起来没生效”。
为什么 fixed 挂件在滚动时跑偏或消失？
不是代码写错了，而是浏览器把 position: fixed 降级成了 position: absolute。最常见原因是祖先元素用了 transform（哪怕只是 transform: translateZ(0)）、filter 或 perspective —— 这些属性会创建新的层叠上下文，让 fixed 元素转而相对于该祖先定位。
- 用开发者工具的 “Computed” 面板检查该元素的
position计算值，确认是不是真的还是fixed - 逐级往上查父级元素的样式，重点看有没有
transform、filter: blur(0)、will-change这类“隐形陷阱” - 如果必须保留 transform，改用
position: absolute+top: auto; bottom: 20px; right: 20px，并确保最近的非-static 父容器设了position: relative
移动端右下角适配安全区域和键盘弹出
单纯写 bottom: 20px 在 iPhone 底部有圆角或 iOS 键盘弹出时，挂件会被顶出屏幕外。不能只靠像素值硬写。
- 用
bottom: max(20px, env(safe-area-inset-bottom))保证不被圆角/键盘遮挡 - 避免使用
vh单位（如bottom: 5vh），iOS Safari 在键盘弹出时不会更新vh值，导致位置错乱 - Android 微信 X5 内核可能不重绘 fixed 元素，可加
backface-visibility: hidden或will-change: transform强制 GPU 加速
z-index 总是被盖住？别只调数字
设 z-index: 9999 不一定管用。真正的问题常是挂件被包裹在一个低层级的父容器里，比如某个 div 设了 z-index: 1，它内部所有子元素（包括 fixed）都受限于这个层叠上下文。
- 优先把挂件 DOM 节点移到
最末尾，彻底脱离业务组件的层叠干扰 - 显式声明
z-index: 2147483647（CSS 最大整数），比z-index: auto更可靠，尤其在 Safari 中 - 确保挂件自身没有
opacity 或 <code>transform，这些也会隐式创建层叠上下文
替代方案：什么时候该放弃 fixed？
当页面存在 overflow: scroll 的局部滚动容器，或需要精确响应视口高度变化（比如键盘弹出后底部留白）时，position: fixed 就不可靠了。
- 考虑改用
position: sticky+bottom: 0，对现代浏览器兼容性足够好，且天然响应视口变化 - 更稳妥的方案是用 flex 布局：把整个页面设为
display: flex; flex-direction: column，挂件作为最后一个子项，用margin-top: auto推到底部 —— 它不脱离文档流，不会被 transform 影响，也不会被键盘顶飞 - JS 补偿仅在极端场景下必要，比如需监听
visualViewport动态调整bottom值
fixed 定位本身很简单，难的是它对上下文极其敏感。真正要花时间的，从来不是写那三行 CSS，而是排查祖先节点里那个不起眼的 transform: scale(1)，或者发现 iOS 键盘弹出后 env(safe-area-inset-bottom) 才是唯一能信任的依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
