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

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

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

z-index层级了解多少?浮动,块级及z-index层级顺序如何排?-Qui-Note

来看下面的这个案例,分别建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-Note

层级排序分析

浮动层与z-index层级对比

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

块级层与z-index层级对比

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

块级层与浮动层相比

块级与浮动层谁在后面,谁的层级高!

总体而言:

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一样,同时存在,谁在后谁的层级高!