DEV Community

Discussion on: Meme Monday 🐷

Collapse
 
h_sifat profile image
Muhammad Sifat Hossain • Edited

Pro Tip: Rather than using randomly high values for z-index use CSS custom properties instead.

Example:

:root {
  --z-level-one: 100;
  --z-level-two: 200;
  --z-level-three: 300;
}

div {
  z-index: var(--z-level-one);
}
Enter fullscreen mode Exit fullscreen mode

Now we can peacefully end the z-index war.

Collapse
 
dimas profile image
Dimas Putra

it's all level one tho 😂

Thread Thread
 
h_sifat profile image
Muhammad Sifat Hossain • Edited

the result of copy pasting.

Thread Thread
 
maxart2501 profile image
Massimo Artizzu

Level three is still equal to level two...

Collapse
 
maxart2501 profile image
Massimo Artizzu

I don't think it will change much...

div {
  z-index: var(--z-level-one-million);
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
eerk profile image
eerk

But now my div has to be on --z-level-one-and-a-half