css 之 z-index

z-index 属性指定了元素及其子元素，决定当元素发生覆盖时，哪个元素在上面；

【1】属性值

（1） auto 默认值

（2）<integer> 整数值

（3）inherit  继承

【2】 基本特性

（1） 支持负值

（2） 支持 CSS3 animation 动画

（3） 在 CSS 2.1 时代，需要和定位元素配合使用

（4） 如果不考虑 css3 , 只有定位元素的 z-index 才有作用

【3】 z-index 与定位元素

（1） 如果定位元素 z-index 没有发生嵌套：遵循 后来居上的准则 和 哪个大，哪个上 原则

（2）如果定位元素 z-index  发生嵌套，遵循祖先优先原则

【4】 层叠上下文与层叠水平

（1） 层叠上下文是 html 元素中的一个三维概念，表示元素在 z 轴上有了“可以高人一等”

根层叠上下文：页面根元素天生具有层叠上下文

（2） 层叠上下文中的每个元素都有一个层叠水平，决定了同一个层叠上下文中元素在 z 轴的现实顺序，遵循 “后来居上”和 “谁大谁上”的 层叠准则。

（3） 特性

【4】 元素的层叠顺序

表示 元素发生层叠时候有着特定的垂直显示顺序。

【5】 z-index 与 层叠上下文

（1） 定位元素默认的 z-index ：auto 可以看成是 z-index: 0 ; （不包括 IE 7 以下）

为什么定位元素会覆盖普通元素： 因为此时 z-index ： auto , 会覆盖 inline 或者 inline-block 元素

（2） z-index 不为 auto  的定位元素后创建层叠上下文；

（3） z-index 层叠顺序的比较止步于父级层叠上下文；

 

【6】其他 css 属性与层叠上下文元素

【7】 z-index 与其他css 属性层叠上下文

（1） 不支持 z-index 的层叠上下文元素的层叠顺序均是 z-index ： auto 级别

（2）依赖 z-index 的层叠上下文元素的层叠顺序取决于 z-index 值

【8】 父子元素的 z-index

父子元素在不设置 z-index 的情况下，默认子元素的层级会比父元素层级高，即使 父元素的 z-index 设置的比 子元素的大，仍然是子元素的层级比父元素的层级高，要想使得父元素的层级大于子元素，可以设置子元素的 z-index ： -1，父元素不需要设置即可；