DEV Community

Z-Index: Geometry, Not Magic

Stephen Charles Weiss on May 07, 2019

It was one of those light bulb moments when things finally clicked. My colleague was describing how to ensure that my elements weren’t bleeding thr...
Collapse
 
vuild profile image
Vuild

No, no, it's magic Stephen. Strange stuff indeed but hopefully your article helps me figure it out better too.

I was fine with z-index:9999999999999 !important.

Collapse
 
stephencweiss profile image
Stephen Charles Weiss

😂All fine and dandy until you need to put something on top of that element!

P.S. I also found out that given the same Z-index, the element that's painted last will be on top (i.e. the one lower in the HTML) -- so I was encouraged to avoid Z-index if possible :)

Collapse
 
vuild profile image
Vuild

I have z-index:99999999999999999 !important. for that (check my site, I am not kidding, the best-worst CSS ever).

The tip: I did not know that but it is really really handy to know years and years later. I wish I had known that before but I really really appreciate it now anyway, no kidding. Thanks (if you've seen my site you'll know why I am grateful).

Thread Thread
 
stephencweiss profile image
Stephen Charles Weiss

Haha - just took a gander that made me chuckle :)

Glad to help!

Thread Thread
 
vuild profile image
Vuild

Appreciated.

Spread the word, use 99999999 !important. It winds up so well. perfect filter. Rugged too.