4 ms·
On this one: > Describe z-index and how stacking context is formed. I have another question: what are best practices for using z-index and simply setting z-in
by klenwell 9y ago
On this one:
> Describe z-index and how stacking context is formed.
I have another question: what are best practices for using z-index and simply setting z-index values?
This came up at my last company where we had some huge unruly stylesheets with what looked like arbitrary z-index values sprinkled throughout (e.g. 1, 100, 660, 661, 10000). I guess maybe this is the answer: keep your stylesheets organized from the start.
I had added an action item to draw up some best practices for using z-index but never got a chance to get to it before I left. I did do some cursory googling and didn't come across anything especially enlightening on the topic.
The links provided in this section of this guide explain how it works but don't really address this question. Can anybody point to a good reference for using (as opposed to explaining) z-indexes?
- nojvek 9y agoTry to use a css preprocessor like sass, less, stylus. Now make a file Called z-index.styl Make variables for all your z indexes used in the app, organized by stack level Do not use a z-index directly in css. Always use a variable after you import the file. This means you can see all the z-indexes in the app and change them atomically if you want.
- neon_electro 9y agoBootstrap can serve as a good example of how to organize z-indexes: https://getbootstrap.com/docs/4.0/layout/overview/#z-index https://getbootstrap.com/docs/4.0/layout/overview/#z-index