利用z-index可以讓多個圖層互相重疊，這件事情已經不稀奇了。但假設今天碰到複雜的版面，需要很多個z-index圖層，通常我們會用99,100,101,9999… 這種無限上綱的的寫法。
但其實，這不是一種好的寫法，因為寫到最後你會不知道現在寫到哪個數字？如果是多人寫一份網站，維護也很不容易，說不定最後為了省麻煩，會 99999 不知道 9 到幾位數去 OTL…。為了解決這個問題，我們可以使用 SASS 幫我們有效管理z-index喲！
使用 SASS 管理 z-index
讓我們先從簡單的 Layout 來看，這邊有三個圖層，分別是header, nav, modal。我們最後希望的排列效果如下圖所示：
如果是用 CSS，只要注意每個圖層的先後順序，再指定相對大的值就可以了。寫法也如同圖片上的z-index數字。
接下來讓我們使用 SASS 換個寫法吧！
一開始我們先使用 SASS 的變數，幫每個 DIV 設定相對應的值：
$elements: header-bar, navi, modals;
element以及後面對應的值都可以依照你的喜好作調整。為了方便日後維護，將值寫成跟class相同是個不錯的選擇。
接著設定每個class的z-index：
.header-bar {
/* z-index: 1 */
z-index: index($elements, header-bar);
}
.modals {
/* z-index: 3 */
z-index: index($elements, modals);
}
.navi {
/* z-index: 2 */
z-index: index($elements, navi);
}
z-index會根據我們前面的設定，找到對應的數字填入。如果最前面的設定值有所更動，每次 compile 之後都會幫我們重新計算z-index，我們就不用因為多增加一個 div，而要回頭調整z-index的順序喲！
這並不是 SASS 為了解決z-index所提出的方法，我們只是單純利用 SASS 的 index function 幫我們做到這件事情。
index($list, $value)
Returns the position of a value within a list.
(回傳 $value 在 $list 裡的順序，也可看成是索引)
因此Function index回傳的會是一個索引值，我們就利用這個特性套在z-index身上，達成幫我們管理z-index的目標。
有了這個規律後，如果今天接到一個複雜的網站專案，也可以將z-index獨立出來做成一份_zindex.scss。
▼ _zindex.scss：
$elements: img-cover, header-bar, navi, modals, tooltip;
$modal-elements: fields, com-dropdown, form, msg-errors, btn-close;
▼ style.scss：
.img-cover {
z-index: index($elements, img-cover);
}
.modals {
.fields {
z-index: index($modal-elements, fields);
}
}
結論
雖然這只是一個 SASS Function 的簡單運用，但是卻很實用，所以在這邊分享給大家。對我來說，要手動管理z-index真的會很煩，用這種層級管理可以一目了然，又不用重新修改一堆程式碼，真的超好用的 XD。
- 此篇文章的概念取自 Sassy Z-Index Management For Complex Layouts。
- Hugo Giraudel 有分享他的另一種解法：http://sassmeister.com/gist/11172138，但我個人比較喜歡 Jackie Balzer 的(小聲 XD
這篇文章 使用 sass 有效控管 z-index 圖層順序 最早出現於 MUKI space*。
