层级

z-index

样式与 CSS也叫：z-index、堆叠顺序、图层顺序、层叠上下文

一句话：元素重叠时决定谁显示在上面的 CSS 属性，数值越大越靠前，常用于弹窗、下拉菜单和吸顶导航。

详细解释

页面可以想成一叠透明胶片，z-index 决定元素在第几层，数值大的盖住数值小的。它只对设置了定位（relative、absolute、fixed、sticky）的元素，或 Flex、Grid 的子元素生效。

最常见的困惑是「设成 9999 还是被盖住」。原因通常是层叠上下文：父元素自身层级低，或设了 transform、小于 1 的 opacity 等属性，子元素的 z-index 再大也只能在父元素内部比较。解决办法通常是把弹窗渲染到 body 下，React 里叫 Portal。

建议全项目统一规划层级，比如吸顶导航 100、下拉菜单 200、弹窗 1000、轻提示 1100，不要到处写 9999。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

下拉菜单被下面的卡片挡住了，请排查层级问题：统一定义层级变量，吸顶导航 100、下拉菜单 200、弹窗遮罩 1000、轻提示 1100；弹窗和下拉菜单渲染到 body 下，避免受父元素的 overflow 或 transform 影响。