原生 无法直接实现底部悬浮，需用 position: fixed; bottom: 0; left: 0; right: 0; margin: 0 覆盖默认居中样式，并将 max-width 设于子容器；移动端建议改用 div[role="dialog"] 避坑。
dialog 标签默认不支持底部悬浮定位
直接用 <dialog></dialog> 无法实现“底部悬浮”效果，因为它的默认呈现是居中模态框，且浏览器原生样式会强制添加 margin: auto 和 position: absolute（或 fixed），但 top/left 值固定为居中计算值。想让它停在底部，必须覆盖这些行为。
关键点在于：原生 <dialog></dialog> 的 showModal() 会触发浏览器内置的居中逻辑，而 show() 虽然允许自定义定位，但多数浏览器（Chrome 97+、Edge 110+）对 show() 的样式控制仍受限——比如设置 bottom: 0 后，它可能被忽略或与 backdrop 冲突。
- 必须显式设置
position: fixed、bottom: 0、left: 0、right: 0 - 需重置
margin为0，否则居中逻辑残留会导致偏移 -
backdrop默认全屏覆盖，不影响底部定位，但若要避免遮挡页面滚动条，可加overflow: hidden到（仅在 dialog 打开时）
如何让 dialog 真正“贴底”并保持响应式宽度
核心是绕过浏览器对 <dialog></dialog> 的默认尺寸干预，用 CSS 强制接管布局。注意：不能只靠 width: 100%，因为父容器不是 （dialog 是 fixed 定位，脱离文档流），所以要依赖视口单位和 padding 控制内边距。
<dialog id="confirm-bar"><div class="bar-content">
<span>确定要退出编辑吗？</span>
<button id="confirm-btn">确认</button>
<button id="cancel-btn">取消</button>
</div>
</dialog>
对应 CSS：
#confirm-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
width: 100vw; /* 避免因 body padding 导致宽度不足 */
max-width: 100%;
border: none;
background: transparent;
}
<h1>confirm-bar::backdrop {</h1><p>background-color: rgba(0, 0, 0, 0.3);
}</p><p>.bar-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #fff;
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
width: 100%;
max-width: 540px; /<em> 移动端友好，居中显示但不撑满 </em>/
margin: 0 auto;
}</p>
-
max-width设在子容器而非<dialog></dialog>上，避免 fixed 元素宽度计算异常 - 不要给
<dialog></dialog>设height，由内容撑开；若需固定高度，设在.bar-content上 - Chrome 对
dialog的transform支持不稳定，慎用translateY微调位置
点击遮罩层关闭 dialog 的兼容性处理
原生 <dialog></dialog> 在 showModal() 下，点击 backdrop 默认不关闭；而 show() 下虽可监听 click，但 backdrop 不是标准 DOM 节点，无法直接绑定事件。可靠做法是监听 <dialog></dialog> 自身的 click，再判断点击是否落在 backdrop 区域。
const dialog = document.getElementById('confirm-bar');
<p>dialog.addEventListener('click', (e) => {
// e.target === dialog 表示点在 backdrop 上（非子元素）
if (e.target === dialog) {
dialog.close();
}
});</p><p>// 点击取消按钮
document.getElementById('cancel-btn').addEventListener('click', () => {
dialog.close();
});</p>
- 不要用
e.target.tagName === 'DIALOG'，因为 IE 不支持，且现代浏览器中e.target就是 dialog 元素本身 - 若 dialog 内部有
pointer-events: none的装饰元素，需额外排除 - Safari（iOS 16.4+）对
dialog的 backdrop 事件支持较弱，建议 fallback 使用show()+ 手动 backdrop 层（仅当必须支持旧 Safari 时）
移动端键盘弹出时 dialog 被顶起或遮挡的问题
这是最常被忽略的坑：iOS 和部分安卓 WebView 中，软键盘弹出会改变视口高度，position: fixed; bottom: 0 可能失效，导致 dialog 悬在半空或被键盘盖住。
- 监听
resize事件，在键盘弹出后强制重设bottom值（但不可靠，因 resize 触发时机不一致） - 更稳妥的做法：改用
position: absolute+bottom: env(safe-area-inset-bottom)，配合viewport设置height=device-height - 终极建议：对移动端，放弃
<dialog></dialog>，改用<div role="dialog"> + 手动管理焦点和 aria 属性——虽然多写几行 JS，但控制力强、无兼容性盲区<p>原生 <code><dialog></dialog>的底部悬浮是个“看起来很美、实际要填不少坑”的方案，尤其涉及输入场景时，它的行为边界比想象中窄得多。
