应使用 position: fixed + bottom: 0，并优先用 transform: translateY() 实现动画；iOS 中需监听 focusin/focusout 手动调整位置，避免键盘弹起导致错位。
底部弹出面板用 position: fixed 还是 transform？
移动端底部弹出面板（比如操作菜单、筛选器、分享面板）必须贴底且不随页面滚动，position: fixed 是最直接的选择，但要注意它在 iOS Safari 中可能因地址栏收放导致定位偏移。更稳妥的做法是：用 position: fixed + bottom: 0，再配合 max-height: 80vh 防止内容溢出视口；若需动画，优先用 transform: translateY() 替代 top/bottom，避免触发重排。
- 不要用
position: absolute放在body下——滚动时会跟着动 - iOS 上
fixed元素在键盘弹起后可能卡在半空，需监听focusin/focusout手动调整bottom - 动画用
transform+transition，比改bottom更流畅，也避免 layout thrashing
点击遮罩层关闭面板的 DOM 结构怎么组织？
遮罩层（overlay）和面板（panel）必须同级包裹，不能让遮罩层是面板的子元素，否则点击面板内部会误触发关闭。常见错误是把 div.overlay 写在 div.panel 里面，结果点按钮、输入框都关掉了。
- 正确结构：
<div class="overlay"></div> <div class="panel"></div>，两者并列于body最后 - 遮罩层需设
z-index比面板低一级（如面板z-index: 1001，遮罩z-index: 1000） - 绑定关闭事件时，只对
.overlay做click，并用event.target === overlayEl判断是否点在遮罩本体上，防止穿透关闭
移动端操作菜单里按钮太小，点击区域怎么达标？
苹果 Human Interface Guidelines 要求最小点击区域 44×44pt，安卓 Material Design 推荐 48×48dp。纯靠 font-size 或 padding 不够，得从布局层保障可触面积。
- 每个菜单项用
button或带role="button"的div，确保语义和焦点可用 - 设置
min-height: 44px+padding: 12px 16px，内边距撑开点击区，文字居中即可 - 避免用
span包文字再加 click 事件——没有默认 focus 样式，也不支持空格/回车触发 - 如果图标按钮，图标本身小于 24px，就用
::before伪元素或额外div扩展点击热区，别只靠font-size
scroll-lock 在 iOS 上为什么不管用？
想弹出面板时禁止背景滚动，常有人用 body { overflow: hidden }，但这在 iOS Safari 中失效——系统仍允许手指拖拽背景。真正有效的方案是监听 touchmove 并调用 preventDefault()，但必须加在 body 或 html 上，且不能阻止默认行为的事件监听器要带 { passive: false }。
立即学习“前端免费学习笔记（深入）”；
- 启用锁屏：给
document.body加touchmove监听器，event.preventDefault()，注册时传{ passive: false } - 禁用时记得
removeEventListener，否则影响后续页面滚动 - 慎用
overscroll-behavior: none—— Android Chrome 支持，但 iOS Safari 15+ 才支持，老版本无效 - 如果面板内容可滚动（比如长菜单），只锁背景，面板内部用
overflow-y: auto+-webkit-overflow-scrolling: touch保惯性滚动
实际中最容易被忽略的是：iOS 键盘弹起后 fixed 面板位置错乱，以及遮罩层点击穿透没做 event.target 判定。这两个问题上线后才暴露，调试成本远高于提前加几行判断逻辑。
