前端层叠上下文与z-index的探究

背景

• 需求概述: 在【裂变迁移任务系统3.0】需求初步完成后的视觉走查后，告知金币icon的位置需要下移，金币堆的下半位置需要被面板遮住，详情如图所示。

• 问题引出: 在使用relative定位结合top的方式实现金币堆下移后，它的层级突然高于了面板层级，但此时我并没有去想原因，而是直接简单粗暴的使用z-index重新恢复了图片1和图片2的正确层级。之后评审时发现虽然问题解决了但并不是正确的做法，因为金币堆层级上升的原因涉及到了较为复杂的层叠上下文和z-index的知识。

概念回顾

2.1 定位

在前端开发中，定位(position)和 z-index 是 CSS 中非常重要的属性，用于控制元素在页面上的位置以及元素之间的堆叠顺序。

首先，我们要了解定位的概念。在 CSS 中，有两种主要的定位类型：静态(static)和相对(relative)。静态是元素的默认定位，元素按照正常的文档流进行布局。而相对定位(relative)则是在正常文档流的基础上，给元素一个偏移量，比如 top: 10px; left: 20px; 这会让元素向右移动 20px，向下移动 10px。需要注意的是，相对定位会保持元素的原始位置，只是视觉上的偏移, 不会脱离文档流。此外，还有绝对定位(absolute)和固定定位(fixed)。绝对定位会脱离正常的文档流，元素的位置相对于最近的已定位祖先(而非正常文档流)进行定位，如果没有已定位的祖先元素，那么就相对于初始包含块进行定位。固定定位则是指元素的位置相对于浏览器窗口是固定位置，即使窗口被滚动，它也不会移动。

2.2 层叠上下文

2.2.1 层叠顺序

层叠上下文就是html中的一个三维概念。相当于在水平面创建了一个z轴，有了层叠上下文的元素会离用户更近。它包含了一组层叠层的元素。在一个层叠上下文中，有七种层叠顺序:

(1) 背景和边框：建立层叠上下文的元素的背景和边框，层叠中的最低级别;

(2) 负的z-index：z-index 为负值时形成的层叠上下文;

(3) 块级盒子： 文档流中正常的块级元素;

(4) 浮动盒子：非定位的浮动盒子;

(5) 行内盒：文档流内的行内级盒子;

(6) z-index：0 定位元素，这些元素建立了新的层叠上下文;

(7) 正的z-index：层叠中的最高级别;

页面中内联元素的层叠顺序要比浮动元素和块状元素都高的原因，浮动和块级盒子主要用来布局，而内联的元素用来显示页面内容。所以比起他的要高。

层叠顺序规则
谁大谁上：当具有明显的层叠水平标示的时候，比如说z-index值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个
后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

2.2.2 创建层叠上下文的方式

(1) 根层叠上下文：指的是页面根元素，也就是html元素。这就是为什么，绝对定位元素在left/top等值定位的时候，如果没有其他定位元素影响，会相对浏览器窗口定位的原因。
(2)定位元素: 含有position的值是relative或absolute,fixed的定位元素，当其z-index值不是auto的时候，会创建层叠上下文。

(3) 使用css3新属性, 常见的有:

• z-index值不为auto的flex项(父元素display:flex | inline-flex);

• 元素的opacity值不是1;

• 元素的transform值不是none;

问题分析

回到裂变需求中遇到的问题。

• 首先，给金币堆图片添加relative定位相当于使其在z轴新增了层叠上下文(赋予该元素z-index: 0)，自然就会比普通元素(z-index: auto)面板图片的层级高。

• 其次，按理说直接给面板图片添加z-index属性是不会恢复正常的图片层级，因为其本身并没有定位元素。而此处的z-index生效属于是误打误撞成功，因为恰巧两张图片父元素的display为flex且自身的z-index属性不为auto。

• 在给金币堆添加relative定位下移之后，恢复层级的正确做法为:

(1): 给面板图片也添加relative定位，为其添加层叠上下文。这样二者的z-index都是0，就会遵循后来居上的原则，面板的层级就总会比金币堆大1，意味着总能遮住金币堆。

(2): 不需要额外新增z-index属性。