要控制网页元素层叠顺序需使用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;
}
这样该 div 就会在其他 z-index 较小的元素之上显示。
3. 层叠上下文的影响
z-index 不仅看数值大小，还受“层叠上下文”影响。每个具有定位属性且 z-index 不为 auto 的元素会创建新的层叠上下文。 这意味着：子元素的 z-index 再高，也只能在自己的父级层叠上下文中比较，不能超过外部更高层级上下文的元素。
常见触发层叠上下文的情况包括：
立即学习“前端免费学习笔记（深入）”；
4. 实际应用建议
为了让 z-index 正常工作，请注意以下几点：
- 确保元素设置了 position: relative、absolute 等
- 合理规划层级数值，避免无限叠加（如 9999 这类“魔法数字”）
- 调试时可用浏览器开发者工具查看层叠顺序
- 模态框、下拉菜单等常用 z-index: 1000 左右，顶部导航栏可设为 100
基本上就这些。只要记住：定位 + z-index 才能控制前后层级，同时注意层叠上下文的限制。