flex子项的z-index需配合position（如relative）才生效；同级已定位子项可正常比大小；若被其他容器遮挡，可能是祖先元素创建了层叠上下文。

Flex子项的z-index为什么有时不生效

Flex容器本身不创建层叠上下文，但它的子项是否能用z-index，取决于子项自己有没有定位。哪怕子项是display: flex的直接子元素，只要没设position（比如relative），z-index就完全被忽略。

常见错误现象：.item { z-index: 10; } 没效果，检查 computed 样式发现position仍是static——这就是根本原因。

• 必须显式设置position: relative（或absolute/fixed）才能激活z-index
• position: sticky也行，但要注意滚动锚点行为可能干扰视觉预期
• 只靠transform（如translateZ(0)）不能替代position，它会触发层叠上下文但不启用z-index对自身生效

同级Flex子项之间用z-index控制覆盖顺序

在同一个Flex容器下，多个已定位子项（都设了position: relative）可以正常用z-index比大小：数值大的盖住数值小的，和普通文档流一致。

但要注意HTML顺序仍有兜底作用：如果两个子项z-index都是auto或相等，后写的那个会显示在前一个之上。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• .box-a { position: relative; z-index: 1; }
• .box-b { position: relative; z-index: 2; } → 一定盖住.box-a
• .box-c { position: relative; }（无z-index）→ 等价于z-index: auto，层级低于z-index: 1

Flex子项想盖过兄弟容器？小心层叠上下文隔离

真正容易踩坑的地方在这里：某个Flex子项内部嵌套了弹窗、下拉菜单，你给它子元素设了z-index: 9999，结果还是被隔壁另一个Flex容器（比如侧边栏）盖住。

原因很可能是那个侧边栏或它的某个祖先触发了层叠上下文——比如加了opacity: 0.99、transform: translateY(0)，或者filter: blur(0)。此时，无论你子项里z-index写多大，都只在自己的上下文内有效，无法“越级”对抗外部容器。

• 用 Chrome 开发者工具的「Layers」面板或「Computed」里的stacking context提示，快速定位谁创建了新上下文
• 临时移除可疑父级的transform或opacity，看覆盖关系是否恢复
• 若必须保留那些样式，就把要突出的组件提到 Flex 容器外（比如用 React Portal 渲染到body下），并统一用 CSS 自定义属性管理z-index值

要不要给Flex容器本身设z-index

一般不需要。Flex容器默认是position: static，设了z-index也没用；如果强行加position: relative再设z-index，反而容易意外创建层叠上下文，把所有子项锁死在该上下文中。

除非你明确需要让整个Flex块作为一个整体参与更高层级的堆叠（比如浮在视频播放器上），否则应避免给容器设position和z-index。

• 优先把层级控制逻辑下沉到具体子项上
• 若容器必须参与全局层叠，用position: relative; z-index: auto代替具体数值，避免创建新上下文
• 数值型z-index只在必要时设，且建议用语义化变量（如--z-dropdown: 100），别硬写9999

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！