BEM类名中不能直接写死z-index，因其是全局层叠信号而非组件内部结构描述；应通过CSS自定义属性统一管理语义化层级常量，并由块级类名绑定，确保可维护性与跨组件协同。
z-index 为什么不能在 BEM 类名里直接写死
BEM 的核心是“类名即契约”，而 z-index 是跨组件协作的全局信号——它不描述组件内部结构，而是声明“我打算浮在谁上面”。把 z-index: 1000 直接塞进 .modal__overlay 或 .dropdown__menu 里，等于把层级决策权下放给单个组件，结果就是：Modal 拉高了，Dropdown 就被盖住；Toast 加了 z-index: 9999，下拉菜单再调也出不来。
真正该被 BEM 管理的，是「谁有权决定层级」和「谁必须遵守层级」。比如：.modal 块要声明“我属于弹窗层”，.dropdown 块要声明“我属于浮层”，但具体数值不该由它们自己拍板。
用 BEM 命名配合 CSS 自定义属性统一导出层级
把层级抽象成语义化常量，再通过 BEM 块名显式绑定，才是可持续做法。例如：
:root {
--z-modal: 1000;
--z-dropdown: 900;
--z-tooltip: 800;
--z-toast: 700;
}
<p>.modal { z-index: var(--z-modal); }
.dropdown { z-index: var(--z-dropdown); }
.tooltip { z-index: var(--z-tooltip); }
.toast { z-index: var(--z-toast); }
</p>
这样做的好处是：
-
.modal和.dropdown这些 BEM 块名，天然成为层级意图的载体，别人一眼看懂“这是弹窗级组件” - 所有数值收口在
:root，改一个地方，全站浮动组件层级同步更新 - 子元素微调（如
.modal__backdrop）可安全用calc(var(--z-modal) - 1)，不会脱离体系
为什么不能用 BEM 元素级类名控制 z-index
像 .modal__content、.dropdown__list 这类元素级类名，只表达“我是 Modal 里的内容”，不表达“我要参与全局层级竞争”。如果给它们单独设 z-index，会立刻触发新的层叠上下文——尤其当父块已带 transform 或 opacity 时，子元素再高的 z-index 也出不了父容器边界。
常见翻车点包括：
-
.dropdown__trigger设了z-index: 999，但.dropdown__menu却卡在下面——因为触发器和菜单不在同一层叠上下文 -
.tooltip__arrow用z-index: 2想浮在 tooltip 内容上，结果整个 tooltip 被 Header 盖住——箭头没提升父块层级，只把自己锁死了 - 用
.card__header--sticky加position: sticky和z-index: 10，却忘了它父容器没设position: relative，导致粘性失效且层级错乱
调试时如何快速定位 z-index 失效根源
遇到“写了 z-index 却不生效”，别急着加数字，按这个顺序查：
- 打开开发者工具，选中目标元素 → 看
Computed面板中position是否为relative/absolute/fixed（不是static） - 检查
z-index在Computed中是否显示为实际数值（若仍显示auto，说明定位或父级上下文阻断了继承） - 往上逐级看父元素：有没有
transform、opacity 、will-change或filter？这些都会创建新层叠上下文，让子元素的z-index失去对外竞争力 - 用 Chrome 的
Layers面板（在 More Tools → Layers）确认当前元素是否被包裹在意外的层叠上下文中
最常被忽略的是：BEM 块本身没设定位，却指望它的子元素靠 z-index 浮起来——z-index 不是魔法，它需要一个明确的“舞台”，而那个舞台，必须由块级类名自己搭建。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
