认识CSS中的z-index元素层级属性

Z-index：指定了元素及其子元素的Z轴顺序，在Z元素发生覆盖的时候，哪一个在下面，哪一个在上面，通常都由Z-index来决定。Z-index的支持的属性值有：z-index:auto/整数/inherit;基本特性有：支持负值，支持animation动画，在css2.1中，须要和定位元素配合使用；若是不考虑CSS3，z-index只对定位元素起做用；

z-index的使用：

    一、若是定位元素不发生嵌套，便是同级元素 ，则遵循“后来居上”和“大小”原则；

    二、若是发生嵌套，则遵循“祖先优先”原则，由父级元素的z-index决定，前提是父级元素的z-index值为数值，此时会忽略子代元素的z-index值；

css中的层叠上下文和层级水平：层叠上下文简单的说就是一个包含了一组堆叠层的元素，它们在Z轴上有着特定的顺序，页面根元素和由z-index为数值的定位元素具备层叠上下文；

层级水平：它决定了同一个层叠上下文中的元素在Z轴上的显示顺序，和z-index并不一样；

层叠上下文的特色：能够嵌套，组成分层次的层叠上下文；每一个层叠上下文和兄弟元素独立，当进行层叠变化时，只影响子元素；

著名的7阶层叠水平：

小解答：一、为何inline/liline-block的层级水平大于float的层级水平？

由于行内元素通常承载的是内容，为了符合页面加载的美观，因此行内元素会覆盖浮动元素；

二、为何定位元素会覆盖普通元素？

由于定位元素z-index:0;而普通元素为行内元素或浮动元素，根据7阶层叠水平表，普通元素和浮动元素都会被覆盖；

3:z-index:0为何不等于z-index:auto?

由于z-index:0;会建立层叠上下文，而z-index:auto；不会，但他们在层叠顺序上是同样的；

其余CSS属性影响层叠上下文的层叠顺序：

一、z-index的值不为auto的flex项；

二、元素的opacity不是1；

三、元素的transform不是none;

四、元素的mix-blend-mode的值不是normal;

五、元素的filter值不是none;

六、元素的position:fixed声明；

七、移动端的webkit-overflow-scrolling设为otuch;

八、will-change指定的属性中的任何一个；

使用z-index须要注意的问题：

一、最小化原则;为了不z-index嵌套层叠关系混乱，尽可能避免使用定位属性；

二、“不超2”原则：非浮层元素，避免设置z-index值超过2，通常在0,1,2；能够经过调节DOM节点的书序来讲实现；

三、浮层组件计数器：为了不浮层组件被z-index值高 的元素覆盖，经过JS获取body下子元素层级最高数，将浮层的z-index值设为+1；

4：可访问性隐藏：z-index:-1;

参考：http://www.zhangxinxu.com/wordpress/?p=5115