Programs for z-index

Say you’ve gotten a z-index bug. One thing is being coated up by one thing else. In my expertise, a typical answer is to place place: relative on the factor so z-index works within the first place, and possibly rejigger the z-index worth till the appropriate factor is on high.

The hazard right here is that this units off a bit of z-index battle. Elevating a z-index worth over right here fixes one bug, after which causes one other by masking up another aspect someplace else while you didn’t wish to. Hopefully, you’ll be able to motive in regards to the scenario and repair the bugs, even when it means refactoring extra z-index values than you thought you may have to.

If the “stack” of z-index values is sophisticated sufficient, you may think about an abstraction. One of many issues is that your z-index values are most likely sprinkled fairly randomly all through your CSS. So, as a substitute of merely letting that be, you can provide your self a central location for z-index values to reference later.

I’ve coated doing that as a Sass map prior to now:

$zindex: (
modal : 9000,
overlay : 8000,
dropdown : 7000,
header : 6000,
footer : 5000
);

.header {
z-index: map-get($zindex, header);
}

Now you’ve bought a central place to handle these values.

Rafi Strauss has taken {that a} step additional with OZMap. It’s additionally a Sass map scenario, nevertheless it’s configured like this:

$globalZIndexes: (
a: null,
b: null,
c: 2000,
d: null,
);

The thought right here is that the majority values are auto-generated by the instrument (the null values), however you’ll be able to specify them if you need. That method, you probably have a third-party part with a z-index worth you’ll be able to’t change, you plug that into the map, after which the auto-generated numbers will issue that in while you make layers on high. It additionally means it’s very simple to slide layers in between others.

I believe all that’s intelligent and helpful stuff — however I additionally assume it doesn’t assist with one other widespread z-index bug: stacking contexts. It’s at all times the stacking context, as I’ve written. If some aspect is in a stacking context that’s underneath another stacking context, there isn’t any z-index worth doable that may deliver it on high. That’s a a lot more durable bug to repair.

Andy Blum wrote about this just lately.

One of many nice frustrations of front-end improvement is the surprising interplay and overlapping of those self same parts. Struggling to rearrange parts alongside the z-axis, which extends perpendicularly by the pc display in direction of and away from the viewer, is such a shared front-end expertise that a component’s z-index can typically be used as a frustrate-o-meter gauging the developer’s temper.

The important thing to maintainable z-index values is knowing that z-index values can’t at all times be straight in contrast. They’re not an absolute measurement alongside an imaginary ruler extending out of the viewport; fairly, they’re a relative order between parts inside the identical stacking context.

Seems there’s a good little debugging instrument for stacking contexts within the type of a browser extension (Chrome and Firefox.) Andy will get into a really tough scenario the place an RTL model of a web site has a rule that makes use of a remodel to maneuver a video on the web page. That remodel triggers a brand new stacking context and therefore a bug with an unclickable button. Gnarly.

Kinda makes me assume that there could possibly be some kinda built-in DevTools method of seeing/understanding stacking contexts. I don’t know if that is the appropriate reply, however I’ve been seeing a leaning into “badges” in DevTools increasingly more. This stuff:

In truth, Chrome 94 just lately dropped a brand new one for container queries, so they’re getting used increasingly more.

Possibly there could possibly be a badge for stacking contexts? Sometimes what occurs with badges is that you just click on it on and it reveals a particular UI. For instance, for flexbox or grid it is going to present the overlay for all of the grid strains. The particular UI for stacking contexts could possibly be shade/texture coded and labelled areas exhibiting all of the stacking contexts and the way they’re layered.

The submit Programs for z-index appeared first on CSS-Tips. You may assist CSS-Tips by being an MVP Supporter.