z-index冲突本质是层叠上下文断裂，它只在同层叠上下文中生效；父容器若触发新上下文（如opacity
z-index冲突的本质是层叠上下文断裂
z-index不是全局数字比大小，它只在同一个层叠上下文中生效。你在组件里写z-index: 9999，但父容器是position: relative且没设z-index（或设了z-index: auto），那它就卡死在那个局部上下文里，永远压不赢隔壁组件的z-index: 10。
常见错误现象：
- Modal弹窗被Dropdown遮住，明明Modal的
z-index值更大 - Tooltip浮层突然“沉底”，inspect发现它被某个
position: relative的卡片容器截断了层叠流 - 用
createPortal挂载的元素（如React的Modal）仍受父组件层叠上下文影响——因为portal只是移动DOM，不移动层叠上下文
Vue/React中统一z-index标尺的实操方式
不要靠人脑记“Modal该用1000，Tooltip该用950”，要让构建工具和CSS自动约束。
- 全部用CSS自定义属性定义标尺，例如：
:root { --z-modal: 1000; --z-dropdown: 900; --z-toast: 850; --z-sticky: 800; } - 组件内只引用变量：
.modal { z-index: var(--z-modal); }，禁用硬编码数值 - Vue中可在
<style scoped></style>里直接使用var(--z-modal)，无需额外配置；React用CSS Modules或styled-components时，确保CSS变量注入到根节点 - 调试时打开浏览器的「Rendering」→ 勾选「Layer borders」，一眼识别哪些元素意外创建了新层叠上下文（比如一个
opacity: 0.99也会触发）
定位声明必须成组，尤其在scoped或CSS Modules环境下
Vue的scoped或React的CSS Modules会把.tooltip编译成.tooltip[data-v-f3f3eg9]，但如果position: absolute和top: 10px分散在两个不同类名下，PostCSS无法保证它们被同一属性选择器包裹，结果就是样式失效或被覆盖。
- 所有定位相关属性（
position、top、left、z-index、transform）必须写在同一选择器下 - 禁用工具类混入定位逻辑：不要在
class="mt-4 absolute"里塞position: absolute——mt-4只管margin，absolute应属于语义化定位类（如js-tooltip-anchor） - 动态定位（如Tooltip随鼠标移动）优先用
transform: translate()，避免top/left触发重排，也避免因position状态切换导致scoped类名匹配失败
第三方UI库的z-index怎么安全覆盖
Element Plus、Ant Design等库自带z-index变量，但直接在组件里写.el-popper { z-index: var(--z-dropdown) !important }会破坏封装性，且容易被后续升级覆盖。
- 通过主题配置覆盖：Ant Design用
theme对象传入zIndexPopupBase；Element Plus用el-config-provider设置z-index基础值 - 若需精细控制，用CSS自定义属性桥接：在根CSS里定义
--z-el-dropdown: var(--z-dropdown);，再在全局样式中写.el-popper { z-index: var(--z-el-dropdown); } - 禁止用
!important硬顶——它会让子组件无法再用z-index做微调，比如Tooltip内部的小箭头需要比弹层低一级
最易被忽略的一点：transform、opacity、will-change这些属性会隐式创建新层叠上下文，哪怕你没写position。只要它们出现在定位元素的任意祖先链上，就可能切断z-index继承路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
