[object Object]

Z-Index Functions

The default behavior for most developers is to set the z-index to 99999 so that whatever <div> you're working on will be on top. If that doesn't work, continue to add a 9 to the end until you get the desired result. (Please, don't do that!) Instead of "hacking" your way to a horrible developer experience, used predefined, meaningful z-indexes.

Set Up

The z() function is about as straight forward as they come, but will be immensely helpful in keeping your sanity intact. The function will pull the values based on the $z-indexes variable in the _variables.scss file at the root of the /00_Abstracts directory.


.modal {
    z-index: z(xl);

.tooltip {
    z-index: z(xs);

.toast {
    z-index: z(md);

.very-important-message {
    z-index: z(trump);


Another common pattern is, rather than using the default values, use the component name that you are setting the z-index for (tooltip, modal, etc.). This could be very useful, but be careful, as it could also result in a lot of unnecessary values.