Jordan Scales 探讨了计算机科学中的拓扑排序概念，以及将其应用于 CSS 中 z-index 概念时的可能表现形式。因此，您无需直接表达 z-index 应该是什么；而是精确地说明您希望哪个元素位于顶部。
我认为这更像是一个概念证明，但无论如何看看都很有趣。
const resolver = new ZIndexResolver();
// A nav with dropdowns
resolver.above(".nav", "main");
resolver.above(".dropdown", ".nav");
resolver.above(".submenu", ".dropdown");
// Tooltips in the document
resolver.above(".tooltip", "main");
// Modals should go above everything
resolver.above(".modal", ".nav");
resolver.above(".modal", ".submenu");
resolver.above(".modal", ".tooltip");
console.log(resolver.resolve());这会生成一个按正确顺序排列的数组。
[ '.modal', '.tooltip', '.submenu', '.dropdown', '.nav', 'main' ]…您可以将其压缩成 CSS。
main { z-index: 0; }
.nav { z-index: 1; }
.dropdown { z-index: 2; }
.submenu { z-index: 3; }
.tooltip { z-index: 4; }
.modal { z-index: 5; }我在这里看到的问题是它没有考虑堆叠上下文。如果 z-index 存在错误，它总是堆叠上下文。没有可能的 z-index 值可以将较低堆叠顺序中的项目提升到任何其他位于较高堆叠上下文中的项目之上。因此，要使这样的功能有效，我认为它必须知道每个项目所在的（可能是嵌套的）堆叠上下文，然后要么尝试调整堆叠上下文本身，要么警告您您所要求的操作无法实现。