底部面板应使用 position: sticky 而非 fixed 实现贴底可交互效果，需配合容器 overflow-y: auto 和 max-height 控制；ios 键盘弹出时通过 focus/blur 切换 class 并用 css 变量兜底；路由切换时在守卫中主动移除面板；触摸穿透问题需精确控制 pointer-events 和 touch-action。
底部面板需要固定定位但不能遮挡内容
直接用 position: fixed + bottom: 0 很容易让面板盖住页面底部文字或按钮，尤其在 iOS Safari 中软键盘弹出时会失效。关键不是“固定”，而是“贴底且可交互”。推荐用 position: sticky 配合容器高度控制：
section {
position: sticky;
bottom: 0;
max-height: 60vh; /* 限制滚动区域，避免面板被顶走 */
}如果父容器没设置 overflow-y: auto 或高度约束，sticky 会退化为 static，这是最常被忽略的兼容前提。iOS 上软键盘弹起时面板被顶到屏幕中间
iOS 的 viewport 缩放和软键盘行为会让 fixed 元素错位，单纯监听 resize 不可靠。更稳妥的做法是检测输入框聚焦状态：
input.addEventListener('focus', () => {
document.body.classList.add('keyboard-active');
});
input.addEventListener('blur', () => {
document.body.classList.remove('keyboard-active');
});然后用 CSS 控制：.keyboard-active .bottom-panel {
transform: translateY(calc(100vh - var(--keyboard-height, 250px)));
}注意：不能依赖 window.innerHeight 动态写内联样式——iOS 在键盘弹出瞬间会先缩 viewport 再触发事件，有 100ms 左右的窗口期，必须用 class 切换加 CSS 变量兜底。点击面板内按钮触发页面跳转后面板残留
SPA 路由切换（如 Vue Router / React Router）不会自动销毁 DOM，旧面板可能还挂在新页面底部。不要靠 v-if 或 useEffect 做延迟销毁，而应在路由守卫中主动移除：
router.beforeEach((to, from) => {
const panel = document.querySelector('.bottom-panel');
if (panel && !to.meta.keepPanel) panel.remove();
});另外，若面板含 z-index: 9999 这类魔数，不同页面层级容易冲突，建议改用 CSS 层叠上下文隔离：.bottom-panel {
position: relative;
z-index: 1;
}
.bottom-panel::before {
content: '';
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100%;
z-index: -1;
}这样面板自身不依赖全局 z-index，避免被其他 modal 盖住。触摸穿透导致背后内容被误点
当面板使用半透明背景或带阴影时，手指点在空白处可能触发下层按钮。这不是 bug，而是 pointer-events 默认继承行为。解决方式分场景：
- 整个面板不需要透传 → 给根元素加
pointer-events: auto（默认值，但显式声明更安全） - 只让某些区域透传（比如关闭按钮旁的空白）→ 用
pointer-events: none在子元素上，再给按钮单独设pointer-events: auto - 面板内有滑动操作（如 tab 切换）→ 必须加
touch-action: pan-x，否则 iOS 会拦截 touchmove 导致卡顿
opacity: 0.99 模拟半透——它仍会捕获事件；要用 background: rgba(255,255,255,0.9) 配合明确的 pointer-events 控制。实际项目里最麻烦的从来不是写几行 CSS，而是判断当前是否处于「键盘弹出+路由切换+滚动锚点偏移」三重叠加状态。这时候靠单一 CSS 属性基本无效，得把 scrollIntoView、focus、resize 和路由生命周期串起来做状态机，而不是堆 patch。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
