在“究竟是什么，z-index？”中，Josh Comeau 将 Photoshop 或 Figma 等设计软件中的图层组与 CSS 中的 堆叠上下文进行了类比。 如果您在 Photoshop 中的图层组 A 中有一个元素在图层组 B 下方，那么除了将整个图层组 A 移动到 B 上方 或去除分组之外，您无法将 A 的子元素推到 B 中的任何元素之上。
这是一个简化的案例
没有z-index值可以将“大东西”放在棕色的<main>元素之上。 但正如 Josh 在文章中指出的那样，存在多种解决方案，例如防止堆叠上下文不必要地触发，或进行一些 DOM 重排以使事情正常工作。 例如在上面的示例中，“大东西”不需要作为标题的子元素——如果不是，堆叠上下文就不会那么重要。
如果您希望工具帮助您诊断此类问题，请阅读 Josh 文章底部的几个有趣工具。