要控制网页元素层叠顺序需使用z-index属性，1. 必须将元素position设为relative、absolute、fixed或sticky；2. z-index数值越大层级越高，auto为默认值；3. 层叠上下文影响显示顺序，子元素无法超越父级上下文；4. 实际应用中应避免魔法数字，合理规划层级。
要控制网页中元素的层叠顺序，可以通过 z-index 属性来实现。这个属性决定了元素在 Z 轴（垂直于屏幕的方向）上的堆叠层级。数值越大，元素越靠前。
1. 基本语法
使用 z-index 需要将元素的定位属性（position）设置为非 static 值，比如 relative、absolute、fixed 或 sticky。 基本写法如下：z-index: 数值;
数值可以是正数、负数或 auto（默认值）。2. 设置定位上下文
只有定位元素才能应用 z-index。如果一个元素 position: static（默认），z-index 不会生效。例如：
div {
position: relative;
z-index: 10;
}
3. 层叠上下文的影响
z-index 不仅看数值大小，还受“层叠上下文”影响。每个具有定位属性且 z-index 不为 auto 的元素会创建新的层叠上下文。 这意味着：子元素的 z-index 再高，也只能在自己的父级层叠上下文中比较，不能超过外部更高层级上下文的元素。常见触发层叠上下文的情况包括：
立即学习“前端免费学习笔记（深入）”；
- 根元素（html）
- position 不为 static 且 z-index 为具体数值
- opacity 小于 1
- transform 不为 none
