z-index学习

---

title: z-index
date: 2017-05-16

• z-index

---

z-index

z-index

概念

z-index

可选值：

• relative(相对定位).
• absolute(绝对定.位).
• fixed(固定定位).
• static(静态).
• inherit(继承).
• initial(初始).

官方文档(从英文翻译来)：

• 具有负值的stacking contexts元素，按照出现的先后顺序排列（越靠后层级越靠上） .
• 没有被定位，没有浮动的块级元素，按照出现的先后顺序排列 .
• 没有被定位，浮动的元素，按照出现的先后顺序排列 .
• 内联元素，按照出现的先后顺序排列排列 .
• 被定位的元素，按照出现的先后顺序排列.

层级关系的比较

• 对于同级元素，默认(或position:static)情况下文档流后面的元素会覆盖前面的.
• 对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高.
• IE6/7下position不为static，且z-index不存在时z-index为0，除此之外的浏览器z-index为auto.
• <font style="color:red">z-index为auto的元素不参与层级关系的比较</font>(对比从父规则理解)，由向上遍历至此且z-index不为auto的元素来参与比较.

默认值规则

• Z-index只能工作在被明确定义了absolute，fixed或relative 这三个定位属性的元素中(除了static).
• Z-index 属性，当被正确使用的时候，会改变自然的层叠顺序。.
• Z-index 为 0 的节点与没有定义 Z-index 在同一层级内没有高低之分.

顺序规则

• 如果不对节点设定 position 属性，位于文档流后面的节点会遮盖前面的节点.

定位规则

• relative，absolute或者fixed，这样的节点会覆盖没有设置 position 属性或者属性值为static的节点
• A 和 B 都不设定 position, 但对 A 的子节点 A-1 设定 position:relative.B 会覆盖 A, 又根据定位规则 A' 会覆盖 B;用例(可能不太贴切,但很常见&实用):

stackDemo-mainMenu.png

从父规则

• 如果 A, B 节点都定义了 position:relative, A 节点的 z-index 比 B 节点大, 那么 A 的子节点必定覆盖在 B 的子节点前面.

补充：

• 不考虑父节点的影响, 设得再大也没用, 那是无法逾越的层级
• opacity 会影响层叠顺序(如下图)

z-inde_float_opacity z-inde_float_opacity z-inde_float_opacity

7层规则,速成z-index

• 形成层叠上下文环境元素的背景与边框
• 拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）
• 正常流式布局，非 inline-block，无 position 定位（static除外）的子元素
• 无 position 定位（static除外）的 float 浮动元素
• 正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 displaytable 和 displayinline ）
• 拥有 z-index : 0 的子堆叠上下文元素
• 拥有正 z-index 的子堆叠上下文元素（正的越低越堆叠层级越低）

z-index_7.png