z-index 学习笔记

顺序规则

如果不设置节点的 position 属性，位于文档流后面的节点会遮盖前面的节点。

定位规则

• 设置节点的 position: static; 位于文档流后面的节点会遮盖前面的节点。
• 设置节点为非 static，则该节点会覆盖没有设置 position 或 position: static; 的节点。

参与规则

z-index 仅在节点的 position: relative/absolute/fixed; 时有效。

默认值规则

若所有的节点都定义了 position: relative;

• z-index: 0; 的节点与没有设置 z-index 的节点在同一层级内没有高低之分。
• z-index >= 1 的节点会遮盖没有设置 z-index 的节点。
• z-index < 0 的节点会被没有定义 z-index 的节点覆盖。

从父规则

如果都设置了 position: relative;

• 同级元素元素 A 的 z-index 大于 元素 B 的 z-index，那么 A 的子元素必定覆盖在 B 的子元素上。
• 同级元素元素 A 的 z-index 等于 元素 B 的 z-index，则根据顺序规则，B 覆盖在 A 上，则 A 的子元素设置的再大，也不可能覆盖过 B 的子元素。