全屏弹窗应挂载到body下或用Portal避免stacking context截断z-index；居中需外层fixed+flex+min-h-screen、内层max-w-lg+overflow-y-auto；遮罩关闭须分离overlay与content并仅绑定overlay点击；移动端用响应式max-w、p-、max-h-[90vh]及min-h-screen适配。
全屏弹窗的HTML结构怎么写才不踩z-index坑
全屏弹窗必须用固定定位，且层级要高于所有内容。常见错误是直接套用 fixed inset-0 却忘了父容器有 overflow: hidden 或 transform，导致弹窗被裁剪；更隐蔽的是 z-index 被父级 stacking context 截断——比如某个卡片用了 transform: translateZ(0)，它就创建了新层叠上下文，再高的 z-index 也压不住它外面的弹窗。
稳妥写法是把弹窗挂到 下（或用 Portal），并显式设置高 z-index：
<div id="modal-root"></div>
然后在 JS 中动态挂载，避免嵌套层级干扰。如果必须内联，至少确保最近的非-static 定位祖先没有创建 stacking context。
居中对齐为什么不能只靠flex + items-center justify-center
很多人一上来就给弹窗容器加 flex items-center justify-center，但实际会失效——因为 flex 容器若没设高度，其子元素的居中行为不可靠；尤其当弹窗内容高度超过视口时，justify-center 反而会让顶部内容被切掉。
真正稳的方案是两层结构：
- 外层
fixed inset-0+flex items-center justify-center，且必须加min-h-screen（防止 flex 主轴无尺寸） - 内层弹窗盒子用
max-w-lg w-full mx-4等控制宽度，并设overflow-y-auto防内容溢出
这样既保证视觉居中，又允许内容滚动，不会因内容过长而丢失顶部。
如何用Tailwind实现“点击遮罩关闭”且不误触内部表单
关键在事件捕获逻辑：遮罩层（overlay）和弹窗主体（content）必须分离，且 onClick 只绑在 overlay 上。常见错误是给整个弹窗容器绑 click，结果点输入框、下拉框时也触发关闭。
结构上严格区分：
<div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
<div class="absolute inset-0" onclick="closeModal()"></div>
<div class="relative z-10 bg-white rounded-lg p-6 w-full max-w-md mx-4">
<form>...</form>
</div>
</div>
注意：overlay 是绝对定位、占满全屏的透明层，content 用 relative z-10 显式提层，确保它在 overlay 上方但响应区域独立。
移动端适配要注意哪些Tailwind类组合
全屏弹窗在小屏上容易撑破视口或留白异常。别只依赖 max-w-md——它在手机上还是太宽。应该用响应式断点：
- 宽度控制：用
sm:max-w-md md:max-w-xl lg:max-w-2xl逐级放宽 - 内边距：手机用
p-4，平板以上升为p-6，避免文字贴边 - 滚动行为：加
max-h-[90vh] overflow-y-auto，防止弹窗高度超视口导致无法滚动到底部按钮 - 键盘弹起：iOS Safari 键盘会压缩视口高度，此时
h-screen失效，所以不要设固定高，靠min-h-screen+ flex 自适应更可靠
最易忽略的是 focus-trap：移动端点进输入框后，按返回键或点空白处应聚焦回弹窗，否则用户可能意外退出。这得靠 JS 补足，Tailwind 做不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
