模态类名必须匹配框架预设规则，如Bootstrap需modal+fade+show协同生效，Tailwind需手动控制显隐与层级；定位须用fixed+inset-0，避免relative/absolute；须同步处理aria-hidden、焦点管理及z-index层叠上下文。
模态类名必须匹配框架的预设规则
多数 CSS 框架（如 Bootstrap、Tailwind、Bulma）不靠通用 .modal 类自动生效，而是依赖一整套配套类名协同工作。比如 Bootstrap 5 要求同时存在 modal、fade、show 才能正确渲染并过渡；Tailwind 则完全不提供模态逻辑，需手动用 hidden/block 配合 z-50、fixed 控制显隐与层级定位。
-
modal类仅定义基础结构（宽高、背景遮罩、圆角等），不控制显示/隐藏 -
show或active类才真正触发展开动画和display: block - 遗漏
fade（Bootstrap）或transition（自定义）会导致弹窗“闪现”而非淡入
定位必须用 fixed + inset-0 或 top/left 组合
相对定位（position: relative）或绝对定位（position: absolute）在模态场景下几乎无效——弹窗会随滚动偏移或被父容器裁剪。所有主流框架默认使用 position: fixed，配合四边归零实现居中覆盖。
- Bootstrap 使用
top: 0; left: 0; width: 100%; height: 100%+transform: translate(-50%, -50%)居中内容 - Tailwind 推荐
fixed inset-0 flex items-center justify-center，比手写top/left更可靠 - 若父容器有
transform、perspective或filter，会干扰fixed定位，此时需将弹窗挂到body下
显隐切换不能只靠 display，要兼顾 aria-hidden 和焦点管理
单纯加 display: none 会让屏幕阅读器仍读取内容，且用户按 Tab 可能跳进不可见弹窗内部。框架的模态类通常同步处理可访问性属性和焦点锁定。
- 打开时：添加
aria-hidden="false"到弹窗，aria-hidden="true"到主内容区，并将焦点移到弹窗内首个可聚焦元素（如button.close） - 关闭时：恢复
aria-hidden，并把焦点切回触发按钮（否则键盘用户会丢失上下文） - 未用 JS 控制时，仅靠
hidden类（如 Tailwind 的hidden）不够——它只是display: none，不解决焦点和语义问题
自定义模态类时，z-index 值容易被覆盖
很多项目全局设置了 z-index: 9999 的导航栏或工具条，而框架默认 z-index: 1055（Bootstrap 5）可能不够用。更隐蔽的问题是：CSS 层叠上下文（stacking context）会让子元素的 z-index 失效。
立即学习“前端免费学习笔记（深入）”；
.my-modal {
position: fixed;
z-index: 2147483647; /* 足够大，避开大部分冲突 */
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}- 避免用
z-index: 999这类“经验数值”，直接查浏览器开发者工具看当前最高z-index - 若弹窗内嵌了下拉菜单、Tooltip 等组件，它们的
z-index必须低于弹窗本身，否则会穿出 - 当父容器有
transform: translateZ(0)或will-change: transform，会创建新层叠上下文，此时弹窗的z-index只在该上下文中生效
实际应用中，最常被忽略的是焦点管理和层叠上下文对 z-index 的限制——这两点不处理，弹窗在键盘操作或复杂布局下必然出问题。
