fixed定位失效的根本原因是父容器使用transform、perspective或filter创建新层叠上下文，使fixed脱离视口参考系；z-index失效源于层叠上下文断层；iOS安全区需用env(safe-area-inset-bottom)适配；性能问题需优化will-change和pointer-events。
fixed定位失效：页面滚动时分享条不见了
常见现象是加了 position: fixed，但分享条在 iOS Safari 或某些安卓 WebView 中不随屏幕固定，一滚动就消失。根本原因是父容器用了 transform、perspective 或 filter（哪怕值为 none），会创建新的层叠上下文，导致 fixed 脱离视口参考系，转而相对于该容器定位。
实操建议：
- 检查祖先元素是否含
transform: translateZ(0)、filter: blur(0)等“隐形触发属性”，删掉或改用will-change: transform替代 - 确保
html和body高度至少为100%，否则部分 Android 浏览器下fixed会失准 - 避免把分享条放在
overflow: hidden的容器内——它不会被裁剪，但可能因层叠顺序被盖住
z-index 不生效：分享条被其他内容挡住
不是 z-index 数值不够大，而是层叠上下文断层了。比如弹窗组件自己建了 z-index: 9999 的新上下文，而你的分享条在另一个平行上下文中，再大的数值也压不住。
实操建议：
- 用浏览器开发者工具的「Layers」面板（Chrome）或「Computed」里的
stacking context查看分享条是否意外成了子上下文 - 把分享条直接挂到
body下，避开所有业务组件的上下文污染：document.body.appendChild(shareBarEl) - 设置
z-index: 2147483647（最大安全整数）不如确保它处于顶层上下文，必要时加isolation: isolate强制新建上下文
iOS Safari 底部安全区遮挡分享条
iOS 15+ 的 Safari 在底部手势区域会叠加半透明遮罩，导致 bottom: 0 的分享条一部分被盖住，用户点不到按钮。
实操建议：
- 用 CSS 常量替代硬编码：
bottom: env(safe-area-inset-bottom)，配合padding-bottom或margin-bottom推开内容 - 同时兼容老版本：用
@supports (padding-bottom: env(safe-area-inset-bottom))包裹新写法，fallback 回bottom: 0 - 别只靠
env()—— 某些微信内置浏览器不支持，得结合 JS 检测window.visualViewport?.height与screen.height差值来动态调整
性能隐患：fixed 元素引发频繁重排重绘
分享条里如果包含轮播图、实时计数器或频繁更新的 SVG 动画，fixed 定位会让浏览器每帧都做合成层判定，尤其在低端安卓机上掉帧明显。
实操建议：
- 给分享条加
will-change: transform（仅当真有动画时），避免浏览器盲目提升图层 - 禁用内部动画的 pointer-events：
pointer-events: none，再给按钮单独设pointer-events: auto，减少事件捕获开销 - 移除所有
box-shadow和border-radius的模糊值，它们在 fixed 层上渲染代价极高
实际最难调的从来不是写几行 CSS，而是搞清当前页面到底有几个层叠上下文、哪些祖先偷偷建了新上下文、以及 iOS 那个看不见摸不着的安全区到底占了多少像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
