Z-index Organization Strategy [closed]

Question

What is a good organizational strategy for dealing with z-indices on a web page?

I am developing a single page app that has many layers due to things like error messages, loading gifs, and modal boxes, and I keep finding myself with elements on top of each other when it doesn't make any visual sense.

Is there a generally accepted approach to how to organize z-indices of various elements? I have searched google and SO but haven't seen any that seem general enough.

I am using SASS in my project so I can easily do addition based on a base z-index, but a general CSS strategy would be even better.

Answer 1

I generally prefer to specify a large z-index for my top-level elements. The best approach I've found is to begin by

• determine what elements must be on top of other elements

• since you are using SASS, you could specify a few variables for various z-index levels:

  .tierBottom { position:[whatever you need]; z-index: 1; }

  .tierMiddle { position:[whatever you need]; z-index: 100; }

  .tierTop{ position:[whatever you need]; z-index: 1000; }

• As a few others have stated, you shouldn't have to worry about most of the containers/wrappers z-index. In the event that you hit some issues, like content being on top, add the low-tier z-index class to the offending element and all should be right with the world.

There may be a lot of different opinions on this, and it may not be the best practice for some, but this is what has worked for me in the past. Hope it helps!