如何使用CSS制作移动端底部抽屉式弹窗BottomSheet？-css教程-PHP中文网

bottomsheet 在移动端必须用 position: fixed 而非 absolute，因 absolute 受滚动容器影响易偏移或消失；ios 键盘场景下 vh 失真，应以 transform: translatey 配合 max-height 控制展开/隐藏，并通过 html 固定定位解决滚动穿透，动画仅用 transform 和 opacity 避免重排。

如何使用css制作移动端底部抽屉式弹窗bottomsheet？

BottomSheet 在移动端必须用 `position: fixed` 而非 `absolute`

因为 absolute 依赖最近的定位祖先，而移动端页面常有滚动容器（如 div[overflow-y: auto]），抽屉会随容器滚动偏移甚至消失。只有 fixed 能真正锚定视口底部。

但要注意：iOS Safari 在键盘弹出或地址栏收起时，vh 单位会失真，导致抽屉高度错乱。所以不能直接用 height: 80vh —— 应改用 max-height + transform: translateY 控制展开状态，初始设为 transform: translateY(100%)。

给抽屉容器设 position: fixed; bottom: 0; left: 0; right: 0;
用 transform: translateY(100%) 隐藏，transform: translateY(0) 展开（配合 transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 更自然）
避免设置 top 或 height: 100vh，它们在 iOS 键盘场景下不可靠

点击遮罩层关闭时，要阻止事件穿透到下方内容

常见错误是只给遮罩层加 click 关闭逻辑，但用户手指松开位置若刚好落在按钮上，会同时触发遮罩关闭 + 按钮点击，造成误操作。

解决方案是：遮罩层使用 pointer-events: auto，抽屉内容区域显式设 pointer-events: auto，并在遮罩 click 回调中调用 event.stopPropagation()；更稳妥的是监听遮罩 touchend 并检查 event.target === maskEl，再执行关闭。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

遮罩层 HTML 必须是抽屉容器的直接子元素，结构类似：

<div class="bottom-sheet">
  <div class="mask"></div>
  <div class="panel">...</div>
</div>

遮罩层 CSS 必须设 z-index 高于面板（如 z-index: 1040），面板设 z-index: 1041
禁止对遮罩层使用 opacity: 0 后还保留 pointer-events: auto —— 透明 ≠ 不可点，该设 opacity: 0.5 + pointer-events: auto 才安全