Z-Index Best Practices?

In the past, I’ve worked on sites with many layered elements and found myself lost in a web of z-index values. I’m interested to hear how others approach assigning z-index values or to learn any “best practices” that create uniformity on new projects.

Thank you,
Christopher

Hey @ctrav,

Regarding z-index values, I separate them by increments of 100.

  • For example, if I have three elements I need stacked and know the order, the first one would have a z-index: 0, the second would have a z-index:100, and the third would have a z-index:200.
  • Unless there are outside factors, the numbering you use doesn’t really matter, but with increments of 100, you have some breathing room if, for example, you someday have to put something in between the second and third elements, you can use 125.
  • If you were to have used 1, 2, and 3, you wouldn’t have that option (I actually ran into this once, and it became a headache)

Hope this helps a little :slight_smile: My guess is you’re already doing this exact thing, but maybe it helps to know someone else has the same thought process!

2 Likes