dialog 标签原生不支持底部弹出，因 showmodal() 强制重置定位且破坏 backdrop 渲染；须改用 show() + 手动 backdrop、自定义焦点管理与 aria 属性，并兼容 firefox/safari 降级方案。
dialog 标签原生不支持底部弹出，它默认居中、全屏遮罩、焦点锁定——想让它“停在底部”，得绕过默认行为，用 CSS 覆盖定位，同时小心破坏模态逻辑。
为什么直接设 position: fixed; bottom: 0 会失效
浏览器对 dialog 的渲染有强干预：showModal() 会强制重置其 position 和 transform，且 backdrop 渲染依赖于原生布局流。若父容器有 transform、will-change 或 overflow: hidden，dialog 可能被裁剪、偏移，甚至 backdrop 完全不出现（尤其 Safari）。更关键的是：一旦你强行用 CSS 拉到底部，焦点管理仍按“居中弹窗”逻辑走，首个可聚焦元素不会自动滚动到视口可见区，键盘用户可能卡在不可见区域。
用 show() + 手动 backdrop 是唯一可控路径
showModal() 锁死定位逻辑，无法妥协；但 show() 不触发 backdrop、不锁背景、不拦截 Esc，反而给了你完全控制权。你可以自己画遮罩、自己管焦点、自己定位置：
- 调用
dialog.show()（不是showModal()），避免浏览器接管布局 - 用
dialog::backdrop无效，改用一个同级<div class="backdrop"></div>，position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5) - 给
dialog设position: fixed; bottom: 0; left: 0; right: 0; max-height: 80vh;，再加overflow-y: auto保证内容超长可滚 - 打开时手动聚焦第一个可聚焦子元素：
dialog.querySelector('input, button')?.focus() - 关闭后，记得
backdrop.remove()并把焦点切回触发按钮
必须重写焦点管理，否则键盘用户会迷路
原生 showModal() 自动做焦点锁定和返回，但底部弹窗需要更细粒度控制：
- 打开前，保存当前
document.activeElement，比如const trigger = document.activeElement - 打开后，用
dialog.focus({ preventScroll: true })让 dialog 成为焦点容器，再聚焦内部第一个控件 - 监听
keydown捕获Tab，手动限制 tab 顺序只在 dialog 内循环（需遍历所有tabindex >= 0或可聚焦元素） - 关闭时，显式调用
trigger?.focus()，不能依赖浏览器自动恢复 - 别忘了加
aria-modal="true"和role="dialog"，否则屏幕阅读器识别为普通 div
Firefox 和旧 Safari 的兼容陷阱
Firefox 目前完全不渲染 dialog::backdrop，即使你用了 showModal()；Safari 15.4 之前不支持 showModal() 的焦点锁定。所以底部弹窗这种定制化强的场景，别赌 showModal() 的跨浏览器一致性：
- 检测支持性不要只看
'showModal' in HTMLDialogElement.prototype，还要测dialog.showModal是否真能锁焦点（可尝试document.body.focus(); dialog.showModal(); console.log(document.activeElement === dialog)） - 降级方案必须是完整 DOM 替换：用
div+z-index+ 手动 backdrop +focus-trap库，而不是简单加hidden属性 - 如果项目已用
dialog-polyfill，注意它默认模拟的是居中弹窗，底部定位需 patch 其 CSS 注入逻辑
真正难的不是让弹窗“贴到底部”，而是让它的键盘导航、屏幕阅读器播报、遮罩点击响应、Esc 行为，在 Chrome/Firefox/Safari/Edge 上表现一致。别只改一行 bottom: 0，那只是冰山露出水面的部分。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
