css - 为什么 z-index 不独立于堆叠上下文？

Question

具有高 z-index 的元素可能低于另一个具有低 z-index 的元素，只是因为较低元素的祖先 z-index 为该元素提供了更高的堆叠上下文。

因此，如果不对 CSS 或 HTML 代码进行重大更改，就不可能从较低的堆栈上下文中覆盖元素。另一方面，如果 z-index 属性是一个“绝对”值(更高的 z-index -> 在 z 轴上的更高位置)，则使用 z-index 属性会很简单。

我的问题是，为什么在浏览器和标准中以这种方式实现？

Answer 1

我认为 cwolves 有正确的答案，现在的样子可能是最合乎逻辑的。为了帮助理解，您可以将 z-index 想象成 Photoshop 图层。如果您在另一个文件夹之上有一个图层文件夹，则包裹的图层显然不能排列在其父文件夹之外，除非您将它们从一个文件夹移动到另一个文件夹。

或者想想盒子:你可以在一个盒子里安排东西，但你不能在两个不同的盒子里安排东西，除非你把它们从一个盒子移到另一个盒子。

如果您遇到需要不同安排的情况，您可能需要重新考虑您的标记以允许这样做。