什麼是z-index?

定義和用法

z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。

註釋：元素可擁有負的 z-index 屬性值。

註釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！

寫這篇文章是有原因的，在近期的專案中遇到了類似的問題，其中用到了很多辦法，但是由於頁面多，改一處就會影響其他的頁面，因此做了一下整合處理。

在頁面中我們會自定義寫多個select下拉框，我這個下拉框寫的是一個div，點選下拉是span，在寫統一樣式的時候設定了一個統一的z-index值，多個下拉框在一起時就出現了下圖的問題：

解決方案：

多寫一個active樣式，通過js來控制將這個樣式加到相對應的div上面，當點選下拉的時候，它的層級樣式便是最高層的，當關閉下拉框的時候便移除這個active樣式，層級就和之前的統一設定的一樣了。

.active {
    z-index: 6999;
}