在瀏覽器可視區域中，頂層圖層位於相關 document 上方，而每個 document 都有一個相關聯的頂層。這表示升級為頂層圖層的元素不需要擔心 z-index 或 DOM 階層。此外，玩家還能取得簡潔的 ::backdrop 虛擬元素。Fullscreen API 規格要詳細說明，因為在 dialog 支援推出之前，Fullscreen 是正在使用的頂層範例。
頂層有助於解決 document 其餘部分上方顯示內容的問題。
重要注意事項：
- 頂層資料層不在 document 資料流之外。
- z-index 在頂層沒有作用。
- 頂層圖層中的每個元素都有樣式化的 ::backdrop 虛擬元素。
- 每個元素和 ::backdrop 都會產生新的堆疊內容。
- 頂層圖層中的元素會依照在集合中的顯示順序堆疊。最後一個動作會顯示在最上方。如要宣傳元素，請先移除再重新新增。
到目前為止，我們如何模擬頂層？開發人員在 body 結尾放置空白容器元素並不常見。而這會作為「擬真品」頂層資料層概念就是這個容器會排在堆疊中的其他項目上方。如果想把重點放在最上面，可以直接加進該容器我們可以在 SweetAlert、reactjs-popup、Magnific Popup 等熱門套件中看到這一點。
有了 <dialog> 和 Popover 等新的內建元件和 API，您就無需仰賴這些解決方法。您可以將內容推送至頂層圖層。
透過 UI 架構，我們可以將宣傳元素與元件對應的元件並存，但是，在 DOM 算繪時，這些變數通常會分開顯示。
使用頂層圖層時，宣傳元素就是在原始碼中放置的位置，例如 <dialog>。不論 DOM 向下多少圖層，元素就沒有任何影響。系統會將它升至頂層圖層，方便您在目標位置與元件 HTML 共同位置進行檢查。如此一來，您就能更輕鬆地同時檢查觸發事件元素和 DOM 中宣傳的元素。舉例來說，如果觸發條件元素需要更新屬性，就特別實用。現在這些元素都位於同一位置，對於無障礙功能也有幫助。
如要說明頂層與 z-index 的高層，請考慮使用此示範。
在本示範中，您可以開啟「SweetAlert」彈出式視窗，也可以開啟頂層 <dialog>。開啟 <dialog>，然後嘗試開啟「SweetAlert」彈出式視窗。您將看到它顯示在頂層圖層元素下方。「SweetAlert」彈出式視窗的根，使用 10000 的 z-index 搭配 position: fixed。
.swal-overlay {
z-index: 10000;
position: fixed;
}
您不需要對 <dialog> 套用任何樣式，就能讓樣式顯示在所有其他內容上方。
開發人員工具
這就要和開發人員工具相關支援有關。Chrome 開發人員工具新增對頂層元素的支援，方便你檢查頂層元素。如此一來，就能更輕鬆地偵錯，以及視覺化呈現在頂層或頂層項目的堆疊情況。
Alina Varkki 發布一篇實用文章，深入瞭解如何使用這些工具。目前 Chrome Canary 版本 105 提供預先發布版功能。
就是這麼簡單！
頂層簡介。讓大家明白「再見！」例如：
.popup-container {
z-index: 10000;
}
你會如何推送至頂層圖層？您是否試用過 dialog？還是試試 OpenUI Popover API？歡迎告訴我們！