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

Question

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

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

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

Answer 1

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

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

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