介紹

在 CSS 中，元素的層疊順序決定了當多個元素重疊時（跟布局沒有完全的關系，也就是說層疊順序只會在幾個疊放元素上進行比較，而不會改變布局），哪個元素顯示在最上面，哪個元素顯示在最下面。

默認情況下，元素的層疊順序是由它們在 HTML 中出現的順序決定的——后出現的元素會覆蓋前面元素的顯示區域。但 CSS 提供了多個方式來調整這個順序，確保元素按照特定的需求進行堆疊。

1. 視覺層疊

在瀏覽器渲染頁面時，如果多個元素的位置發生重疊，瀏覽器會根據它們的“層疊順序”來決定哪個元素顯示在上面。一般來說，后面的元素會覆蓋前面的元素，但我們可以通過調整 z-index、position 等屬性來改變這種默認行為。

1. 默認層疊順序

默認情況下，元素的層疊順序是根據它們在 DOM 中的位置確定的。一個元素的層疊順序比它前面的元素要大。如果沒有特殊設置，后出現的元素會覆蓋先出現的元素。

層疊順序控制

1. z-index

z-index 控制的是元素的層疊順序，數值大的元素會顯示在數值小的元素上面。z-index 只對定位元素（position：relative | absolute | fixed | sticky）生效。默認情況下 z-index 為 auto , auto 時他們的堆疊順序是由文檔順序決定。 auto 屬性就是計算屬性的最終值。設置為 auto 屬性的元素在層疊順序上會相對較弱，會按照文檔流層疊。

2. position

position 屬性是影響層疊順序的一個關鍵因素。只有在元素的 position 屬性設置為 relative、absolute、fixed 或 sticky 時，z-index 才會生效。如果一個元素沒有設置 position（即默認為 static），那么它的 z-index 就不會生效，元素會根據文檔順序進行顯示。

它的層疊只會因為 z-index 而有差別，不會因為是否脫離文檔流而提升層疊性。（只有 z-index 相同時才由文檔流決定）

3. z-index和堆疊上下文

當一個元素的 position 被設置為 relative 、 absolute、 fixed 或 sticky，并且該元素有一個非 auto 的 z-index 值時，瀏覽器會創建一個新的堆疊上下文 （stacking context） 。堆疊上下文中的元素的 z-index 值僅在其所在的上下文內有效，而與外部的元素無關。

基本層疊順序

從下到上依次為：

1. 背景和邊框：元素的背景和邊框處于最底層。
2. 負 z-index 值元素：z-index 設為負數的定位元素（如 position: relative、position: absolute、position: fixed 或 position: sticky）會位于普通元素之下。
3. 塊級元素：普通的塊級元素按文檔流順序依次堆疊。
4. 浮動元素：浮動元素會覆蓋普通塊級元素。
5. 行內元素：行內元素會覆蓋浮動元素和塊級元素。
6. z-index 為 0 或 auto 的定位元素：定位元素但 z-index 為 0 或者 auto 時，按文檔流順序堆疊在其他元素之上。
7. 正 z-index 值元素：z-index 設為正數的定位元素會位于其他元素之上，z-index 值越大，越處于上層。