z-index仅对position为relative、absolute、fixed或sticky的定位元素生效；若元素为static（默认）则z-index被完全忽略，且父级创建层叠上下文时子元素z-index仅在内部有效。
不是写上就生效的属性，它只对已定位元素起作用。如果你给一个普通
直接加
却没效果，大概率是因为漏了
。
必须先设
才能用
浏览器只认「定位元素」的
。所谓定位元素，是指
值为
、
、
或
的元素。
写
（默认值）或完全不写
，
会被忽略
最常用：不脱离文档流，适合微调+层级控制
适合弹窗、提示框等需脱离流的场景，但要注意父容器是否带
别用
布局整页——响应式会崩，且容易触发意外堆叠上下文
为什么两个
数值一大一小，还是被盖住？
问题不在数值本身，而在它们是否属于同一个堆叠上下文（stacking context）。父级一旦创建了独立堆叠上下文，子元素的
就只在内部比大小，跨父级无效。
常见触发父级新建堆叠上下文的操作：
+
（非
）、
、
、
排查方法：打开开发者工具 → 「Computed」面板 → 搜索
和
，看是否标出「Stacking Context」
临时验证：把疑似父容器的
或
注释掉，观察层级是否恢复正常
iOS Safari 和 iframe 的特殊限制
移动端和嵌入场景下，
表现更易出错，不是 bug，是规范行为。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
iOS Safari 对
或
极其敏感，哪怕只是为了开启硬件加速，也可能意外创建新堆叠上下文，让某个按钮“突然浮到最上面”
内部是一个完全独立的文档环境，它的
与父页面毫无关系；你无法用父页的
把遮罩层盖在
上面
如果必须覆盖
，只能在
同级 DOM 层级插入元素，并确保该元素的父容器有更高堆叠上下文优先级
真正决定渲染顺序的，不是
数字本身，而是浏览器构建的堆叠上下文树。数值只是同一上下文内的排序依据。很多人卡在“为什么我写了 9999 还是压不住别人”，其实该查的是谁悄悄当了“小 boss”——那个创建了局部堆叠上下文的父容器。
z-indexdivz-index: 999positionpositionz-indexz-indexpositionrelativeabsolutefixedstickyposition: staticpositionz-indexposition: relativeposition: absolutepositionposition: absolutez-indexz-indexposition: relativez-indexautoopacity: 0.99transform: translateZ(0)will-change: transformz-indexstacking contextopacitytransformz-indextransform: translateZ(0)will-change: transformiframez-indexz-indexiframeiframeiframez-index