z-index生效需同时满足两个前提：元素必须设置非static的position属性，且不能被父容器创建的新堆叠上下文隔离；否则即使数值再大也无效。
z-index 不是“调高就一定浮上来”，它受定位状态和层叠上下文双重限制——没设 position，或父容器意外创建了新堆叠上下文，z-index 就等于没写。
z-index 生效的前提：必须有非 static 的 position
静态定位（position: static）下设 z-index 完全无效，浏览器连解析都不做。常见错误是只写 z-index: 999，却漏掉定位声明。
- 正确做法：哪怕只是想让元素“视觉上浮起一点”，也得加
position: relative——它不改变布局流，最安全 -
position: sticky虽然也支持z-index，但它的堆叠行为受父容器滚动边界影响，容易误判层级 - Flex/Grid 子项默认是
position: static，直接在子元素上写z-index没反应；必须显式加position: relative或其他定位值
子元素 z-index 失效？大概率是父容器创建了新堆叠上下文
一个设置了 z-index 且 position 非 static 的元素，如果还带 transform、opacity: 0.99、filter、will-change 或 isolation: isolate，就会创建新的堆叠上下文。
- 后果：它的所有子元素的
z-index只在这个上下文内比较，再高也出不去——比如弹窗里按钮设了z-index: 9999，仍被导航栏盖住，问题不在数值，而在弹窗父容器的transform - 排查方法：DevTools 的 Layers 面板看是否有额外 “Stacking Context”；或临时删掉父元素的
transform/opacity验证 - 修复思路：要么移除触发属性（如用
top替代transform: translateY()），要么把需要“突围”的元素提到更高层级的 DOM 位置
z-index 数值怎么设才靠谱
设成 999999 不解决问题，反而让后续维护不敢动——真正要管的是结构层级关系。
- 推荐按职责分段：比如
z-header: 100、z-modal: 1000、z-tooltip: 2000，中间留足空隙方便插入新层 - 负值有用：
z-index: -1可以让装饰性背景图严格沉底，不用改 HTML 结构 - IE6/7 有历史 bug，会把非定位祖先也当堆叠上下文起点，但现代项目基本可忽略
CSS Cascade Layers 是更底层的冲突解决方案
当 z-index 和定位都对了，但样式还是被第三方库覆盖，说明问题已不在层叠顺序，而在 CSS 规则本身的优先级竞争。
-
@layer是浏览器原生支持的层叠控制机制（Chrome 99+、Firefox 97+、Safari 15.4+），它让整块 CSS 规则按层分组，层间优先级由声明顺序决定 - 关键陷阱：没加
@layer的普通规则属于“未命名层”，它的优先级高于所有已命名层——这意味着你自己的散装 CSS 会自动压过@layer components，极易踩坑 - 实际用法：先统一声明层名顺序，如
@layer reset, base, components, utilities;，再把对应规则包进去；第三方库若支持（如 Tailwind v3.1+），也会进固定层，你只需确保自己@layer components声明在它之后
最常被忽略的其实是“谁创建了堆叠上下文”——有时候删掉一行 opacity: 0.99，整个弹窗层级就恢复正常。别急着调数字，先打开 Layers 面板看看真实结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
