ios safari中sticky-top失效主因是父容器触发层叠上下文（如transform、filter）或overflow隐藏，导致吸附作用域错误；需检查computed position、逐级排查祖先样式，并显式设置z-index。
sticky-top在iOS Safari里不吸附，检查父容器是否触发层叠上下文
最常见原因是父容器加了transform、filter或will-change——哪怕只是transform: translateZ(0)，也会创建新层叠上下文，直接让position: sticky失效。移动端尤其敏感。
实操建议：
- 用 DevTools 选中导航栏，看 computed 样式里
position是否还是sticky；如果不是，往上逐级检查祖先元素的transform、opacity、filter等属性 - 临时移除疑似样式（比如
container-fluid上加的transform），观察是否恢复 - 若必须用 transform（如动画），可改用
scale(1.001)替代scale(1)，避免触发层叠上下文
父容器设了 overflow: hidden/auto，sticky-top 直接被截断
Bootstrap 的 sticky-top 依赖最近的可滚动祖先。如果导航栏外层是 <div class="container overflow-hidden"> 或自定义滚动容器（如后台框架里的 <code><div class="layout-scroll">），粘性作用域就变成那个容器，而非视口——滚动时它根本不会动。<p>实操建议：</p>
<ul>
<li>确认导航栏的**直接父元素**没有 <code>overflow: hidden、overflow: auto 或 overflow: scroll
sticky-top 放在 height: 100vh 容器里，iOS 上 min-height 计算异常会导致吸附失败；可试 min-height: -webkit-fill-available
sticky 元素的父容器不是 overflow-x: auto 的直接子元素移动端键盘弹出后 sticky 失效，top 值被重置
iOS Safari 在软键盘弹出/收起时会重排布局，有时导致 top: 0 失效或计算偏移。这不是 bug，而是 viewport 高度动态变化引发的渲染延迟。
实操建议：
- 给
sticky-top元素加z-index: 1020（Bootstrap 5 默认 modal z-index 是 1050，留出余量） - 避免用
flex或grid作为sticky-top的直接父容器——旧版 Safari 对 flex/grid 内 sticky 支持极差 - 真遇到键盘干扰，可用媒体查询兜底：
@media (max-height: 400px) { .sticky-top { position: fixed; top: 0; } }，但仅限极端场景
多个 sticky 元素堆叠错位，z-index 未显式声明
sticky 元素默认 z-index 为 auto，同级元素按 DOM 顺序堆叠。若页面有顶部导航 + 侧边栏 + 操作浮层，它们可能相互遮挡，尤其在 iOS 上渲染顺序不稳定。
实操建议：
- 所有
sticky-top元素必须显式设置z-index，且值递增：导航栏用z-index: 1020，侧边栏z-index: 1021，操作按钮z-index: 1022 - 不要依赖 Bootstrap 默认的
z-index值（它只在组件内部生效，对自定义 sticky 无效） - 检查是否有其他 CSS 规则覆盖了
z-index，比如全局重置样式里写了* { z-index: 0 !important }
真正卡住人的地方不在代码写法，而在 DOM 结构和祖先样式——一个看不见的 transform 或一行 overflow: hidden 就能让整个 sticky 行为归零。调试时别急着改 JS，先用 DevTools 把 computed position 和父级 overflow、transform 过一遍。
