sticky-bottom在iOS及旧版Safari中失效需同时满足：显式声明-webkit-sticky在前、sticky在后；父容器禁用transform/filter/overflow:hidden；flex父容器设align-items:flex-start；内容不足时需用flex布局确保滚动上下文。
sticky-bottom 在 iOS 和旧版 Safari 中不生效怎么办
Bootstrap 5.3+ 确实引入了 sticky-bottom 类，但它底层只是 position: sticky; bottom: 0，而 Safari（尤其是 iOS 15.4 之前）对 bottom 方向的 sticky 支持极差——即使加了 -webkit-sticky 前缀也常被忽略。
实操建议：
- 必须显式添加
position: -webkit-sticky; position: sticky;，不能只依赖 Bootstrap 的 class - 父容器不能有
transform、filter或will-change，否则 Safari 直接禁用 sticky 行为 - 若父容器是 flex 容器，需确保其
align-items不是center或stretch（会干扰 sticky 触发条件） - 在 iOS 上更稳妥的做法：降级为
position: fixed; bottom: 0;，并用 JS 检测是否支持sticky再动态切换
sticky-bottom 被父容器 overflow-y: hidden 截断
这是最常被忽略的失效原因：sticky 元素必须在其滚动上下文中“有空间可 sticky”，一旦父容器设了 overflow-y: hidden（哪怕只是 <main></main> 或 <div class="container">），sticky 就彻底失效，元素退化为普通定位。
<p>常见场景和解法：</p>
<ul>
<li>页面结构里用了 <code><main class="overflow-hidden"> —— 直接删掉该类，或改用 overflow-y: auto
<div class="d-flex flex-column h-100"> 但没给子元素高度约束 —— 改成 min-vh-100 + flex-fill 显式分配空间<nav> 内，而 <nav> 的父元素是 <header> 且设了 height: 60px —— sticky-bottom 必须挂载在能滚动的容器内，不要嵌太深内容太短时 sticky-bottom 悬在半空，不是贴底
sticky-bottom 是“滚动吸附”，不是“视觉贴底”。当页面总高度不足一屏（body 高度 100vh），它不会自动沉到底部，而是停在文档流原始位置——这和很多人预期的“页脚始终在窗口底部”不符。
此时应判断真实需求：
- 要的是“内容短时沉底、长时随滚动固定” → 改用 Flexbox 布局实现经典 sticky footer（
body { display: flex; flex-direction: column; min-height: 100vh; }+main.flex-fill+footer） - 要的是“始终在视口底部，不管内容多短” → 改用
fixed-bottom，但必须手动为<main>加pb-5（或padding-bottom: 60px）留白，否则文字会被盖住 - 想兼顾两者？得 JS 监听
document.body.scrollHeight和window.innerHeight，动态切 class，无纯 CSS 解法
sticky-bottom 和 fixed-bottom 混用导致 z-index 错乱
两者定位机制完全不同：fixed-bottom 脱离文档流，层级由 z-index 控制；sticky-bottom 仍在文档流中，z-index 只在 sticky 激活后才生效。如果同时存在多个底部元素（比如导航栏 + 操作按钮栏），容易出现遮挡顺序错乱。
关键点：
-
sticky-bottom元素默认z-index: 1030（和 navbar 一致），若要盖过其他 fixed 元素，需显式设更高值，如z-index: 1050 - 不要给
sticky-bottom的父容器设z-index，它会创建新层叠上下文，反而限制子元素层级表现 - 移动端软键盘弹出时，
fixed元素可能被顶起或消失，而sticky更稳定——但前提是父容器没被 iOS 强制缩放或重排
sticky-bottom，后者靠 fixed-bottom + padding-bottom，混着用只会让问题更难定位。
