因为absolute定位需相对于最近已定位祖先元素，若弹窗容器未设position:relative，按钮便锚定到body导致飘出；正确做法是为弹窗直接父容器显式添加position:relative，并配合top:0、right:0和transform:translate(50%,-50%)精准对齐右上角顶点。
关闭按钮为什么总飘到页面右上角，而不是弹窗右上角？
因为 position: absolute 的定位锚点没设对。浏览器会往上找最近的「已定位祖先」（position 为 relative、absolute、fixed 或 sticky），如果弹窗容器没声明 position: relative，按钮就默认锚定到 ，自然飞出去。
必须在关闭按钮的**直接父容器**（通常是弹窗主体 <div class="modal">）上加 <code>position: relative —— 即使它原本只是个普通 <div>，也得显式写上。
<ul>
<li>
<code>top: 0; right: 0; 把按钮左上角钉在容器右上角
transform: translate(50%, -50%) 把按钮自身向右、向上各拉一半，让它的中心点对齐容器右上角顶点（避免按钮宽高导致偏移）z-index: 10 或更高，否则可能被弹窗内容遮住border-radius，按钮超出部分会被裁切，可给容器加 overflow: visible
弹窗内容区怎么水平+垂直居中，又不依赖固定宽高？
别用 margin-top: -height/2 这类需要预知尺寸的写法。最稳的是 position: fixed 配合 transform，它对动态内容完全友好。
关键三步：top: 50% + left: 50% + transform: translate(-50%, -50%)。前两步把弹窗左上角挪到视口中心，第三步把它往回拉自身宽高的 50%，结果就是整个弹窗中心对齐。
- 必须用
position: fixed，不是absolute——否则滚动时弹窗会跟着父容器跑 - 父容器（比如
）不用设position: relative，fixed锚定的是视口 -
max-width: 90vw和max-height: 80vh防溢出，配合overflow-y: auto处理长内容 - 别写
width: 100%或height: 100%，容易撑爆或滚动条错位
点击遮罩层关闭弹窗，但点内容区不关闭，怎么防冒泡？
这是父子元素事件冒泡导致的：点击内容区，事件一路冒泡到遮罩层，触发了关闭逻辑。不能靠 stopPropagation() 硬拦，容易破坏其他交互。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
正确做法是监听遮罩层的 click，但只在 event.target === 遮罩层本身 时才执行关闭。
- 遮罩层和弹窗必须是同级兄弟元素（都挂载在
下），不能是父子关系 - JS 判断示例：
if (e.target === backdropEl) { modalEl.classList.add('hidden'); } - 如果用了原生
<dialog></dialog>，点击背景自动关闭，无需手动处理 - 确保遮罩层没有
pointer-events: none，否则点不到
为什么关掉弹窗后键盘用户卡住了？
焦点没还回去。弹窗关闭后，焦点停留在已消失的元素上，键盘 Tab 键就“掉进黑洞”了。
必须在关闭逻辑里手动把焦点交还给触发按钮（比如“打开弹窗”的那个 <button></button>）。
- 用
triggerBtn.focus()，别用triggerBtn.click()—— 后者可能重复触发打开逻辑 - 如果触发按钮已被销毁或不可聚焦，要 fallback 到页面首个可聚焦元素（如
document.querySelector('a, button, input')） - 原生
<dialog></dialog>会自动处理焦点返回，但自定义弹窗必须手写 - 移动端尤其要注意：iOS Safari 对
focus()支持不稳定，可加setTimeout(() => triggerBtn.focus(), 0)微调时机
position: static，不加 position: relative 就没法让子元素 absolute 有效；又比如遮罩层和弹窗层级错位，z-index 再大也盖不住创建了新层叠上下文的父容器。
