fixed inset-0 是模态框定位的起点，因 fixed 实现视口绝对定位、inset-0 等效于 top/right/bottom/left: 0 贴合浏览器四边，确保全屏覆盖且不随滚动偏移。
为什么 fixed inset-0 是模态框定位的起点
因为模态框必须脱离文档流、覆盖全屏，且不随滚动偏移。fixed 提供绝对视口定位，inset-0 相当于 top: 0; right: 0; bottom: 0; left: 0 —— 它不是“撑满父容器”，而是“贴住浏览器四边”。如果用 absolute，一旦父元素有 transform 或 overflow，位置就可能错乱；用 relative 更是完全无效。
常见错误现象：
– 滚动页面时模态框跟着动（用了 absolute 或没设 fixed）
– 右侧出现横向滚动条（忘了加 overflow-hidden 到 ）
– 模态框只占一小块（误把 inset-0 当成 padding/margin 使用）
- 始终把模态框直接挂到
下，避免嵌套在有transform的组件里 - 配合
overflow-hidden关闭 body 滚动，否则背景仍可拖动 -
inset-0本身不控制尺寸，内容需额外约束（比如用max-w-md mx-auto my-8 p-6居中卡片）
z-50 足够吗？z-index 的实际取值逻辑
Tailwind 的 z-50 默认是 z-index: 50，看似够用，但真实项目里常被覆盖——比如第三方 UI 库的弹层用 z-100，或你自己写的 toast 组件设了 z-40 却漏掉 position: relative，导致层级失效。
关键不是数字大小，而是 stacking context。只要父级有 transform、opacity 、<code>filter 等属性，就会创建新 stacking context，子元素的 z-index 只在该上下文中生效。
- 检查模态框外层是否意外套了
transform或filter的 wrapper - 用浏览器开发者工具的 “Layers” 面板确认 stacking context 是否被截断
- 保守起见，模态框根容器用
z-50，遮罩层用z-40，内容卡片用z-60，留出调整余地
点击遮罩关闭模态框的常见陷阱
很多人直接给遮罩层加 onclick="closeModal()"，结果发现点到弹窗内容区域也关了——因为事件冒泡没阻止。更隐蔽的问题是：用 pointer-events-none 给遮罩加穿透，却忘了内容区得显式设回 pointer-events-auto。
使用场景：需要点击空白处关闭，但允许点击内部按钮、输入框、下拉菜单等交互元素。
- 遮罩层用
pointer-events-auto，内容卡片用pointer-events-auto（默认） - 绑定点击事件时，在 handler 里判断
event.target === modalBackdropEl再关闭 - 别用
event.stopPropagation()在内容区，它会干扰Select、DatePicker等依赖捕获阶段的组件 - 移动端注意：遮罩层要加
touch-action: none，防止 iOS 上触发双击缩放
响应式与可访问性不能靠 inset-0 自动解决
inset-0 确保覆盖全屏，但不等于适配所有设备。小屏上直接居中卡片会切掉内容，大屏又显得太空；而无障碍方面，fixed 元素默认不被屏幕阅读器聚焦，键盘 Tab 也无法进入。
性能影响：模态框即使 hidden，只要 DOM 存在且含复杂子树，仍参与渲染计算。建议用 v-if（Vue）或 {show && <modal>}</modal>（React）控制挂载。
- 小屏用
max-w-full w-full p-4，中屏以上才升为max-w-md - 必须设
role="dialog"、aria-modal="true"和aria-labelledby - 打开时用
focus()主动聚焦第一个可交互元素，关闭后恢复原焦点 - 别依赖
opacity-0 invisible隐藏模态框——它们仍在 DOM 中且可被读屏器访问
最常被忽略的是焦点管理：用户按 Esc 关闭后，焦点没回到触发按钮上，下一次 Tab 就从页面顶部开始，体验断裂。这个细节没有 CSS 能自动解决，必须手写逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
