alert() 无法右上角显示，因其是浏览器强制居中、不可样式化与定位的原生模态框，受安全策略限制；替代方案是用 position: fixed 的自定义 DOM 浮层模拟，并注意可访问性与交互逻辑对齐。
alert() 无法定位 —— 它是浏览器原生模态对话框，由系统控制位置和样式，任何 CSS 或 JavaScript 都不能改变它的显示位置。
为什么 alert() 不能右上角显示
这是浏览器安全策略决定的：防止页面伪造系统提示（如钓鱼弹窗）。所有主流浏览器（Chrome、Firefox、Safari、Edge）都强制居中显示 alert()，且不响应 window.moveTo()、CSS position 等任何干预手段。
常见错误尝试包括：
- 给
alert()外层加div并设position: fixed; top: 10px; right: 10px;—— 无效，alert()不在 DOM 中 - 用
setTimeout延迟后调用window.resizeTo()或window.moveBy()—— 现代浏览器已禁用这些 API 对弹窗的控制 - 试图用
console.log模拟“右上角提示”并叫它alert—— 用户体验和语义完全不同
替代方案：用自定义 DOM 元素模拟警告框
真正可控的方式是用 HTML + CSS + JS 构建一个视觉/行为接近 alert() 的浮层，再用 position: fixed 锚定右上角。
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
关键实现点：
- 容器设
position: fixed; top: 16px; right: 16px; z-index: 9999; - 添加
box-shadow和圆角模仿原生质感 - 点击遮罩或「确定」按钮后移除元素（不是
display: none，避免残留） - 按
Enter或Escape键时也触发关闭（提升可访问性）
最小可用示例：
<div id="toast-alert" style="
position: fixed;
top: 16px;
right: 16px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
padding: 12px 16px;
max-width: 320px;
z-index: 9999;
">
<div>⚠️ 操作失败，请重试</div>
<button onclick="this.parentElement.parentElement.remove()"
style="margin-top:8px; padding:4px 12px; font-size:14px;">
确定
</button>
</div>
进阶注意：别忽略焦点与可访问性
原生 alert() 会自动聚焦、暂停后续脚本、阻塞页面交互 —— 自定义组件无法完全复现这种阻塞性，但要注意：
- 弹出时用
element.focus()让键盘用户能直接按Enter - 添加
role="alert"和aria-live="assertive"让屏幕阅读器立刻播报 - 不要用
setTimeout自动关闭（除非是纯提示类 toast），警告必须由用户主动确认 - 如果业务逻辑依赖「阻塞等待」，需重构为 Promise + 回调，例如：
showCustomAlert().then(() => doNext())
真正的难点不在定位，而在行为对齐：什么时候该打断用户，什么时候只需轻量提示，以及如何让键盘和屏幕阅读器用户获得一致反馈 —— 这些比 right: 16px 更容易被跳过。
