HTML 元素的顯示優先順序，指的是當多個元素重疊時，決定哪個元素顯示在最上層的規則。這主要由以下幾個因素決定：
-
堆疊上下文 (Stacking Context): 這是理解顯示優先順序的核心概念。某些 HTML 元素會建立新的堆疊上下文，形成一個獨立的層疊環境。在一個堆疊上下文中，元素的層疊順序由其在 HTML 文件中的位置和一些 CSS 屬性共同決定。 常見的建立堆疊上下文的元素和屬性包括：
- HTML 元素:
<html>,<body>,<iframe> - CSS 屬性:
position: fixed;position: absolute;以及position: relative;的後代元素如果設定了z-index值（非auto）position: sticky;z-index值不為auto的 flex item (父元素display: flex或inline-flex)z-index值不為auto的 grid item (父元素display: grid或inline-grid)opacity值小於 1 的元素transform值不為none的元素filter值不為none的元素isolation: isolate;will-change指定的屬性值為以上任意一種contain: paint;perspective值不為none的元素的子元素mix-blend-mode值不為normal的元素backdrop-filter值不為none的元素
- HTML 元素:
-
堆疊水平 (Stacking Level): 在同一個堆疊上下文中，元素的堆疊水平決定了它們的顯示優先順序。堆疊水平越高，元素顯示越靠前。以下規則決定了堆疊水平：
- 根元素: 堆疊上下文的根元素擁有最低的堆疊水平。
- 定位元素:
position值為relative、absolute或fixed的元素，以及z-index值不為auto的元素。z-index值越大，堆疊水平越高。如果z-index值相同，則文件流後面的元素堆疊水平更高。 - 普通元素: 沒有定位的元素，按照它們在 HTML 文件中出現的順序堆疊，後面的元素堆疊水平更高。
-
z-index屬性:z-index屬性用於控制元素的堆疊水平。它可以接受以下值：auto(預設值): 元素的堆疊水平由其父元素決定。- 整數: 指定元素的堆疊水平。正值表示在堆疊上下文中更靠前，負值表示更靠後。
inherit: 繼承父元素的z-index值。
-
同級元素的堆疊順序: 對於擁有相同堆疊水平的同級元素，後出現的元素會覆蓋先出現的元素。
總結:
理解堆疊上下文是關鍵。可以將網頁看作是由多個堆疊上下文組成的。每個堆疊上下文都是獨立的層疊環境，其內部的元素按照上述規則進行堆疊。當多個堆疊上下文重疊時，擁有更高堆疊水平的堆疊上下文會顯示在更前面。 如果兩個元素不在同一個堆疊上下文中，則需要比較它們所在堆疊上下文的堆疊水平。
實踐建議:
- 儘量避免複雜的堆疊上下文巢狀，以簡化除錯和維護。
- 合理使用
z-index，避免濫用過大的值。 - 在分析堆疊問題時，可以使用瀏覽器的開發者工具來檢視元素的堆疊上下文和堆疊水平。
希望以上解釋能夠幫助你理解 HTML 元素的顯示優先順序。