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
