Will Boyd @codersblock.com 路 Nov 21

Heads up, #CSS has an `infinity` constant. You can use it to create an unbeatable z-index.

109 likes 16 replies

?

Replies

Mashell 路 Nov 22

I actually said this as a joke one time and to know that it's an actual thing is so awesome!

Luke 路 Nov 21

Unbeatable you say... top-layer would have something to say about that 馃槣. Jokes aside, top layer is the best part about popover. No more z-index wrangling.

Chris Haynes 路 Nov 21

My first thought was does `z-index: calc(infinity + 1);` work 馃槀 (it doesn't)

Keith Henry 路 Nov 22

I can beat it easily with `popover`

Jonathan Blair 路 Nov 22

I鈥檒l stick to z-index: 999999999999; like god intended

John Kreitlow 路 Nov 21

Reminds me of "WORLD WAR Z-INDEX: Restoration of sanity to revisions/slider/menu z-index values": core.trac.wordpress.org/changeset/24...

Soufiane 路 Nov 22

Sometimes, pushing up the z-index doesn鈥檛 solves my problem. I also throw an isolation isolate and nothing happens. Then I just give up or bring in a portal

Adam Kuhn 路 Nov 21

Dillinger Escape Plan approves

Carter Baxter 路 Nov 21

Just gonna be sitting here for a while, stuck on the concept of calc-ing infinity.

comiCSS 路 Nov 21

Use max() for extra effect. It will work the same, but it feels more powerful ;P

Ben Brignell 路 Nov 21

Immediately tried: z-index: calc(infinity + 1);

Sean 路 Nov 22

Haven't we known since the 1920's that some infinities are bigger than others? Is this why hotel sites always have terrible CSS?

Simon Fraser 路 Nov 21

z-index is never unbeatable; it鈥檚 contained within its enclosing stacking context, so some other stacking context can get on top.

Eric Portis 路 Nov 21

Wild that it took this post for me to be curious enough to look into how z-index ties are resolved codepen.io/eeeps/pen/GR...

Maikel Krause 路 Nov 21

Top layer be like

Matt Felten 鈿★笍 路 Nov 21

Does infinity + 1 work though?