抖音一面：z-index大的元素一定在小的上面吗？

大家好，我是年年！开始文章前，上两道面试真题：z-index值大的元素一定在值小的上面吗？如何实现父元素覆盖子元素？先公布一下答案：z-index不一定会生效，生效了也不一定是值大的在上面，主要取决于层叠上下文；给父元素设置一个很大的z-index不能实现覆盖子元素，但是把子元素的z-index设置成负数却可以满足要求。这两个题的考点都是层叠上下文，本文会讲清为什么。文章首发在我的公众号：前端私教年年。订阅第一时间获取我的最新文章！顾名不难思义，层叠上下文是把元素以三维的视角，放在不同层级来判断最后的堆叠关系，它由z-index这个属性来决定“等级“。如何让z-index生效z-index是用于规定元素在z轴的高度，其值越大，离用户越近，越在“上面”。使用时可能会感觉这个属性不太听话：给元素设置的z-index好像没有生效，它没有按照预期跑到其他元素上面。因为它单独使用时不生效，一定要配合定位属性一起，即只对指定了position属性的元素生效——只要不是皮老卖默认值static，其他的absolute、relative、fixed都可以使z-index生效。如图1所示，在粉色的父元素下有有两个绝对定位的子元素1和2，两个子元素都没有设置z-index，通过top/left属性控制他们的位置，让他们含稿发生重叠，可以看到2在1的上面。因为两者都没有设置z-index，其层叠等级都可以看作是0，同级的元素会根据其在HTML中的出现顺序出现顺序决定堆叠结果。（图1）公众号后台回复103获取在线代码地址如果我们希望1在2的上面，如图2所示，可以给元素1加上z-index:1，而没有指定z-index的元素2的z-index依旧可以当作0对待，按照大小关系，元素1在元素2上面了。（图2）公众号后台回复104获取在线代码地址目前为止，都没什么难度，不过是大小比较而已。但很多时候会发现，层叠结果只用单纯的数值大小解释不了：如图3所示，粉色背景下有两个子元素1和2，2中有一个子元素3。三个元素都是绝对定位，其中元素3的z-index值最大，但是却被压在元素1下面了。（图3）公众号后台回复105获取在线代码地址稍微修改一下，只把2号元素的的z-index去掉。如图4所示，元素3又跑上来，盖在1号、2号元素上面了。（图4）公众号后台回复106获取在线代码地址要想搞懂这些问题，需要了解层叠上下文。什么是层叠上下文层叠上下文听起来比较抽象，你可以把它想象成一个三维空间，这个空间内有很多个平面。最大的层叠上下文就是由文档根元素——html形成的：它自身连同它的子元素就形成了一个最大的层叠上下文，也就是说，我们写的所有代码都是在根层叠上下文里的。层叠上下文包含多个平面，具体来说：每个z-index的值形成一个平面，普通的无定位的块级元素也是一个平面，浮动元素也是一个平面，正是这燃逗些平面形成了层叠上下文。除此之外，每个有z-index数值的元素也会连同它的子元素一起，生成一个小的层叠上下文，这个小层叠上下文和父级一样，拥有多个平面。去处理这些上下文时，我们可以按照从小到大的顺序递归：先把最小的堆叠上下文中元素的顺序理好，拍成一片——当做一个整体，再与父级的堆叠上下文中其他元素比较。不知道你有没有见过小吃街上的甲骨文仙贝：在一个大的压片的锅里放上面糊，在面糊上放上一个小虾，最后合上盖子夹紧，变成扁扁的一小片，可以清晰的看到上面虾的样子。（截图自网络）这个用来压片的锅就是层叠上下文，面糊、虾就是不同层级的html元素。他们在被压扁之前按照明确的上下顺序摆放，但最后都会形成薄薄的一片小饼干。这片小饼干可以被放进一个更大的锅里，和其他的食材，一起作为原料，继续做成一片大饼干，但在大锅眼里，这片小饼干诞生时是面糊在上还是虾子在上，根本不重要，因为现在它是一个整体，只有讨论这片小饼干在第二口锅中，与其他食材的摆放顺序才有意义。记住在这个模型，层级判断就很简单了。我们在面对一些难以判断的层级关系时，可以整理出一棵“层叠上下文树”，有点类似于dom树的结构。从小到大，把一个层叠上下文的内的不同平面的元素堆叠好，拍平，再放到父级的堆叠上下文树中。下面会用几个例子加深理解，都附有在线链接，可以先点进去看看，试试自己能否解释最后的呈现结果：demo1公众号后台回复107获取在线代码地址其中DOM的层级关系如下container1:absolute1号:absolutez-index:12号:absolutez-index:2container2:absolute3号:absolutez-index:3container1和container2虽然都是绝对定位，但是没有设置z-index，不形成层叠上下文。所以只有根元素形成的这一个。1、2、3号元素当然也形成了层叠上下文，但