z-index可为负数且符合规范，但效果异常主因是元素未定位、父级创建堆叠上下文或负值使其沉至背景之下；需确认position非static、父容器无背景及未触发隐式上下文。
z-index 可以为负数，而且规范明确支持——问题不在于“不能为负”，而在于**负值没生效或效果不符合预期**。根本原因通常是：元素没定位、父级创建了堆叠上下文、或负值被压到了背景层之下。
z-index 负值本身是合法的
浏览器完全接受 z-index: -1、z-index: -99 这类写法，W3C 规范定义其取值为 auto | <integer></integer>，整数包含负数。常见误解源于实际效果“没看到遮挡”或“元素消失了”，但这不是语法错误，而是层级计算逻辑在起作用。
为什么 z-index: -1 看起来像失效或消失？
负值生效的前提是元素已定位（position 不为 static），且它被压到了当前堆叠上下文的最底层（背景和边框之下）：
-
z-index: -1的元素会沉到其堆叠上下文根节点的「背景和边框」之下，但仍在该上下文内部 - 如果父容器有背景色或背景图，它就会被盖住，看起来像“消失”
- 如果父容器
overflow: hidden，还可能直接裁掉内容，进一步加剧“不见”的错觉 - 浮动元素（
float）本身不参与z-index比较，但默认处于层叠顺序中“z-index: 0”的位置，天然高于z-index: -1
z-index 负值真正起作用的典型场景
负值不是用来“遮挡别人”，而是让自身退到更后——适用于背景化、嵌套视觉层次等明确意图：
- 把一张图片设为文字背景：
position: absolute; z-index: -1;，前提是父容器已设position: relative - 模态框遮罩层需要压在内容下但浮在页面背景上，可用
z-index: -1配合isolation: isolate或独立上下文 - 避免子组件意外覆盖父容器 UI，给子元素设
z-index: -1，但必须确保父容器已创建堆叠上下文（如position: relative+z-index: auto）
调试 z-index 负值是否生效的关键检查点
别只看 CSS 是否写了 z-index: -1，要逐层确认：
立即学习“前端免费学习笔记（深入）”；
- 目标元素是否有
position: relative/absolute/fixed/sticky？static下z-index完全被忽略 - 它的最近定位祖先是否无意中创建了新堆叠上下文？比如加了
transform、opacity: 0.99或overflow: hidden - 它的渲染层级是否已被兄弟元素用更高自然层叠顺序覆盖？例如后写的
div即使没z-index，也可能盖住前一个z-index: -1元素 - 用浏览器开发者工具的“Layers”面板或勾选“Show stacking order”（Chrome DevTools > Rendering > Paint flashing），直观查看当前元素实际所处的堆叠上下文和层级位置
