CSS深入理解之z-index

1. z-index 基础

z-index 含义

z-index 属性指定了元素及其子元素的 [z顺序]，而 [z顺序] 可以决定当元素发生覆盖的时候，哪个元素在上面.通常一个较大 z-index 值的元素会覆盖较低的那一个

属性值

auto –> 默认值
<integer> –> 整数值
inherit –> 继承

基本特性

支持负值
支持 CSS3 animation 动画

@keyframes zIndex {
  0%{ z-index:-1; }
  100%{ z-index:51; }
}

在 CSS2.1 时代，需要和定位元素配合使用

如果不考虑 CSS3，只有定位元素(position:relative / absolute / fixed / sticky，没有 static)的 z-index 才有作用！在 CSS3 中有例外……

2. z-index 与定位元素

如果定位元素 z-index 没有发生嵌套

后来居上
哪个大，哪个在上面

如果定位元素发生嵌套

祖先优先原则（前提：z-index 为数值，不是 auto）：

3. 层叠上下文

层叠上下文(stacking context)是 HTML 元素中的一个三维概念，表示元素在 z 轴上有了”可以高人一等”的能力，含义：

皇帝(你)
当官(层叠上下文元素)
家族(嵌套)

层叠上下文是表示普通老百姓 HTML 元素当官了，离皇帝更近了

产生层叠上下文：

页面根元素天生具有层叠上下文，称之为”根层叠上下文” –> 皇亲国戚
z-index 值为数值的定位元素也具有层叠上下文 –> 科考入选
其他属性 –> 其他当官途径

层叠上下文特性

层叠上下文可以嵌套，组合成一个分层次的层叠上下文

一个家里，爸爸可以当官，孩子也是可以同时当官的。这个家族的官就当得比较有层次

每个层叠上下文和兄弟元素独立: 当进行层叠变化或渲染的时候，只需要考虑后代元素

自己当官，兄弟不沾光。有什么福利或者变故只会影响自己的孩子们

每个层叠上下文是自成体系的: 当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中

每个当官的都有属于自己的小团体。当子孙或属下发生的排辈摩擦什么的，都是自己宅院的事情，不会影响官员自己和皇帝之间的距离

4. 层叠水平

层叠上下文中的每个元素都有一个层叠水平(stacking level)，决定了同一个层叠上下文中元素在 z 轴上的显示顺序，遵循”后来居上”和”谁大谁上”的层叠准则 层叠水平和 z-index 不是一个东西。普通元素也有层叠水平，每一个当官的家里儿孙啊，仆人什么的，都有一个论资排辈(即层叠水平)，决定了在一起的时候，谁排在前面，离官员更近。