z-index属性在什么情况下会失效？

【概念释义】

z-index 是 CSS 中用于控制元素在 Z 轴（垂直于屏幕方向）上堆叠顺序的属性。它决定了元素在层叠上下文中的前后层级关系，值越大，元素越靠近用户视觉方向（即显示在上层）。

核心作用：解决元素重叠时的显示优先级问题，常用于弹窗、下拉菜单、遮罩层、固定定位元素等需要覆盖其他元素的场景。

通俗理解：z-index 就像给元素分配一个“楼层号”，楼层号越大，越靠近用户视线；但前提是这些元素必须在同一个“楼栋”（层叠上下文）内，否则楼层号无法跨楼栋比较。

【基础使用】

基础语法

/* 整数值，默认 auto */
z-index: auto;
z-index: 0;