z-index.scss を試す
assetsにz-index.scssを追加
例：
code:z-index.scss
/* 上 */
$z-second-modal: 5
$z-modal: 4
$z-navigation-menu: 3;
$z-cinema-scope: 2;
$z-default: 0;
$z-background: -1;
/* 下 */
まず、CSSの仕様として、
position: absolute; とposition: fixed;にしか z-index が適応されない。
absolute や fixed で設定した z-index はDOM構造が並列になってるものどうしで効く。
position: static; より absolute や fixed が必ず上に来る（優先される）。
position: static; より absolute や fixed を下にしたい場合は、z-indexをマイナス値にする。
これらを踏まえて↓
mixins.scss の absolute にデフォルトで $z-default を与えておき、かつ編集できるようにしておくと嬉しい。 absolute の mixin に渡すプロパティは必ず z-index.scss の変数を使用すると、レイヤーが管理できて嬉しい。
変数名はレイヤーごとに作る。
間に入れたいレイヤーが発生した時は新しく変数名を追加して、z-index.scss の数字をずらす。
DOM構造が並列になってるものどうしで効くというのがめんどい。
詰まった時は z-index.scss でBEMっぽく書いて解決しよう。
ということで今回初めてこの方法を試してみます。
これで困ったことがあったら、また考える！