HTML/CSS z-index失效的原因快速上手指南

HTML/CSS发展到今天，围绕z-index失效的原因已经形成了一套比较成熟的用法和最佳实践。本文梳理其中最实用的部分，并配上示例代码。

问题一：z-index失效的原因的学习路径是怎样的？

遇到z-index失效的原因相关的问题，先看错误信息，大部分线索都藏在报错里。

先理解z-index失效的原因的基本概念和适用场景，再动手写代码，避免边写边猜。

问题二：能看个z-index失效的原因的实际例子吗？

直接上代码，z-index 失效的原因：

/* z-index 只对「已定位」元素（非 static）生效 */
.mask {
  position: fixed;   /* 忘记加定位的话，z-index 再大也无效 */
  z-index: 1000;
}

/* 失效的第二个原因：父级创建了层叠上下文 */
.parent {
  opacity: 0.9;      /* opacity/transform/filter 都会创建层叠上下文 */
}
/* 此时子元素的 z-index: 9999 也跳不出 parent 的层级，
   解决：把浮层移到 body 下，或去掉父级的这些属性 */

问题三：使用z-index失效的原因时容易踩哪些坑？

• 开发环境正常、线上却报错的情况，多半是环境差异导致的，优先核对版本号和配置项。
• 中文乱码问题十有八九和编码有关，统一使用 UTF-8 能避开大部分坑。
• 遇到问题先看日志，日志看不懂再把关键报错贴到搜索引擎，命中率很高。

以上就是今天的全部内容。z-index失效的原因不难，难的是坚持学习这件事本身。继续加油。

遇见问题加 QQ23979811 协助处理