Jordan Scales erforscht das Informatikkonzept der topologischen Sortierung und wie es aussehen könnte, wenn es auf das Konzept von z-index in CSS angewendet würde. Das heißt, Sie geben nicht direkt an, was der z-index sein soll; stattdessen sagen Sie genau, welches andere Element darüber liegen soll.
Ich denke, es ist eher ein Proof-of-Concept, aber es ist trotzdem interessant anzusehen.
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());Das erzeugt ein Array in der richtigen Reihenfolge.
[ '.modal', '.tooltip', '.submenu', '.dropdown', '.nav', 'main' ]…das man dann in CSS einfügen kann.
main { z-index: 0; }
.nav { z-index: 1; }
.dropdown { z-index: 2; }
.submenu { z-index: 3; }
.tooltip { z-index: 4; }
.modal { z-index: 5; }Das Problem, das ich hier sehe, ist, dass es keine Berücksichtigung von Stapelkontexten gibt. Und wenn es einen Fehler mit z-index gibt, dann ist es immer der Stapelkontext. Es gibt keinen möglichen z-index-Wert, der ein Element in einer niedrigeren Stapelreihenfolge über andere Elemente in einem höheren Stapelkontext heben könnte. Damit etwas wie dies effektiv funktioniert, müsste es meiner Meinung nach wissen, in welchem (möglicherweise verschachtelten) Stapelkontext sich jedes Element befindet, dann entweder versuchen, den Stapelkontext selbst zu verschieben, oder Sie warnen, dass das, was Sie verlangen, nicht funktionieren wird.