层级
Z-Index
中级通用层级（Z-Index）是 CSS 中控制重叠元素前后绘制顺序的属性。它能帮你让弹窗盖住页面、让菜单浮在卡片上；但数值只在相应的堆叠上下文中比较，不是设得越大就一定越靠前。
你可能会说：「这个下拉菜单被旁边的卡片盖住了，帮我让它显示在卡片前面。」
读之前建议先了解
动手看看订单卡片上的菜单与弹窗
菜单和弹窗占着同一片位置。拖动两个层级数值，看看谁盖住谁；关键还要看它们是不是在同一个堆叠上下文里。
卡片设了 z-index: 1，就创建了自己的堆叠上下文。菜单再高也只能在卡片内部排；弹窗的层级要和整张卡片的 1 比。
要点为什么把 Z-Index 调大，元素还是被挡住？
- 1
先确认元素能否参与层级比较
z-index 通常作用于已定位的元素，也能作用于弹性布局和网格布局中的子项。你给普通文档流里的卡片加一个很大的值，可能看不到变化；先检查它的布局方式和定位状态。
- 2
数值比较有自己的范围
某些 CSS 属性会让元素形成堆叠上下文。里面的子元素再怎么提高 z-index，也不能单独跳到外面元素的前面。就像弹窗装在一个靠后的容器里，弹窗的数值再大，仍可能被另一个容器盖住。
- 3
从遮挡关系倒查容器
遇到菜单被盖住，我们可以用浏览器开发者工具检查菜单和遮挡它的元素，再往上找各自的父级。这样比不断把数值从 10 加到 9999 更容易找到真正决定前后顺序的容器。
容易混淆的地方
z-index 管的是元素重叠时的前后绘制顺序，不负责把元素移动到某个位置；位置通常由定位、弹性布局或网格布局决定。它也不同于设计里的视觉层级：标题看起来比正文突出，可能靠字号和对比度实现，并不需要 z-index。若内容被容器裁切，单纯提高 z-index 也不能让它越过裁切边界。
什么时候用
适合用
- 后台页面的筛选下拉菜单与数据表格重叠时，用 z-index 控制菜单显示在表格前面。
- 网站打开自定义弹窗和遮罩时，用 z-index 安排遮罩、弹窗与页面内容的前后顺序。
- AI 聊天工具的悬浮操作栏会与消息卡片重叠时，用 z-index 明确谁显示在上方。
不适合用
- 只是想让两张卡片左右排列、互不重叠，用弹性布局或网格布局安排位置，不需要 z-index。
- 菜单被父容器的溢出设置裁掉时，先处理裁切或调整菜单的挂载位置；提高 z-index 不能解决裁切。
- 想让标题比正文更醒目时，调整字号、字重和对比度；这是视觉层级，不是元素叠放问题。
练一练选一个答案，看看解释
你在做后台页面：弹窗的 z-index 已设得很高，却仍被顶部导航盖住。弹窗位于一个设置了 transform 的内容容器内。下一步最合适的是？
让 AI 帮你做复制给 AI Agent 直接用
请检查后台页面弹窗与顶部导航的遮挡关系，找出各自的堆叠上下文，再调整 z-index 或弹窗挂载位置，让弹窗稳定显示在导航前面。不要只把数值改大，并说明你改动了哪个容器的层级关系。