z-index层级很多前端都会用，很大程度上就是z-index的数字叠罗汉，一层层的加，那么你知道z-index的值可以设为-1嘛？例如下面：

z-index: -1;
z-index: 0;
z-index: auto;

这个时候，它们与浮动层、块级层会有怎么样的交集呢？

z-index层级了解多少？浮动，块级及z-index层级顺序如何排？-QUI-Notes

来看下面的这个案例，分别建5个元素，对应的css分别设置为： 

.zi-f1{z-index: -1;}
.zi-0{z-index: 0;}
 .zi-1{z-index: 1;} 
.zi-a{z-index: auto;}

第五个元素什么都不设置，保持默认块级。最后指定宽高和位置及背景色！然后f12调出浏览器调式器，手动拖拽调整对应层的位置，并观察左侧图层层级变化！
z-index层级了解多少？浮动，块级及z-index层级顺序如何排？-QUI-Notes

层级排序分析

浮动层与z-index层级对比

调整浮动层的位置，发现它层级会发生改变，但层级却一直高于 z-index：-1层；浮动层与z-index：0层相对比受布局先后的影响——越往后层级越高。
z-index层级了解多少？浮动，块级及z-index层级顺序如何排？-QUI-Notes

块级层与z-index层级对比

调整块级item的位置，发现它层级会发生改变，但层级却一直高于 z-index：-1层；块级层与浮动层和z-index：0层相对比受布局先后的影响——越往后层级越高。
z-index层级了解多少？浮动，块级及z-index层级顺序如何排？-QUI-Notes

块级层与浮动层相比

块级与浮动层谁在后面，谁的层级高！

总体而言：

1.块级层、浮动层、z-index:0层受布局影响，最后的层级越高！
2.块级层、浮动层、z-index:0层都在z-index:-1层的上面；

3.排序：z-index:1 >  块级层、浮动层、z-index:0层 > z-index:-1层。

另外，z-index:0和z-index:auto一样，同时存在，谁在后谁的层级高！