本文作者:高峰,360奇舞团前端工程师,W3C性能工作组/WOT工作组成员。
前言
提起,z-index大家脑海里可能会立刻浮现这样的知识点:“z-index的值大小控制元素在Z轴上显示的层级,z-index越大显示的层级越高(也就是在最上层,离观察者越近),没有指定的按照出现顺序堆叠,此外z-index不能跨父元素比较。
z-index的使用似乎就是这么简单,对吧?
我们先看如下例1:
<div class="box box1">DIV#1,z-index为2</div>
<div class="box box2">DIV#2,z-index为auto</div>
HTML中有如下两个元素,DIV#1的z-index为2,DIV#2向右向上偏移。问:它们谁会显示在上面?
demo1: https://codepen.io/verymuch/pen/jdNwOW/
如上所示,z-index为2的元素并没有显示在第二个元素上面。这似乎很奇怪,那到底是为什么呢?
如果你也对此存在困扰,那就和我一起往下看吧。笔者将逐步引导大家深入理解z-index的用法。
一、没有使用z-index时元素如何堆叠?
首先,我们先了解下默认情况下,元素的堆叠,即在没有使用z-index时,元素是如何堆叠的。
如果没有给任何元素指定z-index,则元素按照如下顺序进行堆叠(由下到上,由远及近)。
根元素的背景和边框
非定位的后代块元素,按照在HTML中的出现顺序进行堆叠
定位的后代块元素,按照在HTML中的出现顺序进行堆叠
注:定位的元素即为position的值不是static的元素
demo2: https://codepen.io/verymuch/pen/KJPvpQ/
如上例2所示,定位的元素(DIV#1、DIV#2、DIV#3与DIV#4)按照出现的顺序堆叠。非定位的元素(DIV#5与DIV#6)虽然出现在后面,但是会被定位的元素遮盖,不过它们本身是按照出现顺序堆叠的。
注意,当使用order属性改变flex元素子元素的出现顺序时,