Jordan Scales explores the pc science idea of topological sorting, and what it would appear to be if utilized to the idea of z-index in CSS. So, you don’t categorical what the z-index needs to be instantly; as a substitute, you say precisely what different component you wish to be on high of.
I feel it’s extra of a proof-of-concept, however it’s enjoyable to take a look at anyway:
const resolver = new ZIndexResolver();
// A nav with dropdowns
resolver.above(“.nav”, “most important”);
resolver.above(“.dropdown”, “.nav”);
resolver.above(“.submenu”, “.dropdown”);
// Tooltips within the doc
resolver.above(“.tooltip”, “most important”);
// Modals ought to go above every part
resolver.above(“.modal”, “.nav”);
resolver.above(“.modal”, “.submenu”);
resolver.above(“.modal”, “.tooltip”);
console.log(resolver.resolve());
That produces an array in the correct order:
[ ‘.modal’, ‘.tooltip’, ‘.submenu’, ‘.dropdown’, ‘.nav’, ‘main’ ]…which you’ll be able to skoosh into CSS:
most important { z-index: 0; }
.nav { z-index: 1; }
.dropdown { z-index: 2; }
.submenu { z-index: 3; }
.tooltip { z-index: 4; }
.modal { z-index: 5; }
The issue I see right here is that it doesn’t account for stacking contexts. And if there’s a bug with z-index, it’s at all times the stacking context. There is no such thing as a attainable z-index worth that may increase up an merchandise in a decrease stacking order above every other objects which might be in the next stacking context. So, to make one thing like this work successfully, I feel it must know what (presumably nested) stacking context every merchandise is in, then both try to jostle the stacking context themselves, or warn you that what you’re asking for received’t work.
To Shared Hyperlink — Permalink on CSS-Methods
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!