z-index用于控制定位元素在Z轴上的堆叠顺序，数值越大层级越高，但受堆叠上下文限制，需结合position使用，并注意层级分组以避免冲突。
在CSS中，
z-index
用来控制元素的堆叠顺序，也就是元素在垂直于屏幕方向（Z轴）上的层级。数值越大，元素越靠前，越容易被看到。
z-index的基本规则
z-index只对
定位元素
生效，也就是说元素必须设置了
position
为
relative
、
absolute
、
fixed
或
sticky
才能使用 z-index。
默认情况下，所有元素的 z-index 为
auto
，遵循 DOM 的自然堆叠顺序（后写的元素在上面）
设置一个具体数值（如 z-index: 1）后，元素会根据数值大小决定层级
正数 > 0 > 负数，数值越大层级越高
堆叠上下文的影响
z-index 并不是全局比较的，它受
堆叠上下文
（stacking context）限制。每个堆叠上下文内部独立计算层级。
当一个元素创建了新的堆叠上下文（比如设置了 z-index 为数值、opacity 小于 1、transform 等），它的子元素只能在这个上下文中进行层级比较
即使子元素的 z-index 是 999，它也无法超过另一个独立堆叠上下文中 z-index 为 1 但层级更高的父级
常见使用技巧
为了让 z-index 正常工作，注意以下几点：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
确保元素有定位属性，例如：
position: relative;
避免随意使用极大数值（如 9999），建议按层级分组，比如：背景层用负数，UI层用 1-10，弹窗用 100 以上
模态框、下拉菜单、提示框等需要浮在其他内容之上时，单独设置较高的 z-index
简单示例
下面是一个常见场景：
此时 .box2 会显示在 .box1 上面，即使它在HTML中先出现。
基本上就这些。只要记住：定位 + z-index 数值 + 堆叠上下文范围，就能准确控制元素层级。不复杂但容易忽略细节。
.box1 {
position: absolute;
z-index: 1;
}
.box2 {
position: absolute;
z-index: 2;
}