认识CSS中的z-index元素层级属性_html/css_WEB-ITnose

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

z-index的使用：

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

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

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

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

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

著名的7阶层叠水平：

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

因为行内元素一般承载的是内容，为了符合页面加载的美观，所以行内元素会覆盖浮动元素；

2、为什么定位元素会覆盖普通元素？

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

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

因为z-index:0;会创建层叠上下文，而z-index:auto；不会，但他们在层叠顺序上是一样的；

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

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

2、元素的opacity不是1；

3、元素的transform不是none;

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

5、元素的filter值不是none;

6、元素的position:fixed声明；

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

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

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

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

2、“不超2”原则：非浮层元素，避免设置z-index值超过2，一般在0,1,2；可以通过调节DOM节点的书序来说实现；

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

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

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