Stack order

loonar-wp/assets/styles/config/

├── colors
├── layout
├── typography
└── z-index
    └── _index.scss

Define and update your z-indexes as the project grows, each as a variable.

The good approach to z-indexes is to keep a free space between each z-index, so you'll be able to add new elements without having to change every z-index.

_index.scss

$modal: 1000;
$mask: 900;
$navFixed: 800;
$tooltip: 700;
$popover: 600;
$dropdown: 500;
$nav: 400;
$contentTop: 300;
$content: 200;
$contentBottom: 100;