为啥的我的z-index不生效了？？

Posted 2023-03-21

参考技术A

最近开发时遇到了一个有趣的现象 z-index & transform 等连用造成了z-index不生效，因此想借此机会记录一下学习成果。

本篇文章偏概念性，请在专业人士的监督下食用。

原文： https://www.yuque.com/u548790/tech/anns1h

这是 HTML 中的一个三维概念（举个不太合适的🌰类似皮影戏？）用图片更容易明白。

假设这是我们看到的一个页面（左图），但是实际上他是通过这样展现的（右图），我们肉眼所见的画面可能是多个层叠加展示的，由此就会涉及到不同层的层级问题。

stacking context - mdn - 链接

这里只简单介绍一下常用的 Stacking Context 。

在一个层叠上下文内，不同元素的层叠次序如下图所示（由内到外）：

概括来说，z-index为正 > z-index:auto/z-index:0/不依赖z-index的层叠上下文 > 内容 > 布局 > 装饰。

选自张鑫旭《CSS世界》图7-7

这个标题内容非常的宽泛，我们提供如下的解题思路：