頂層會位於瀏覽器檢視區域中相關 document 的上方，且每個 document 都有一個相關聯的頂層。也就是說，提升至頂層的元素不必擔心 z-index 或 DOM 階層。他們還可以使用整齊的 ::backdrop 擬物元素。Fullscreen API 規格會提供更多詳細資訊，因為 Fullscreen 是 dialog 支援前使用的頂層的絕佳範例。
頂層可解決在 document 其餘部分上方顯示內容的問題。
重要注意事項：
- 頂層資料層位於 document 流程之外。- z-index 在頂層中無效。- 頂層圖層中的每個元素都有樣式化的 ::backdrop 虛擬元素。- 每個元素和 ::backdrop 都會產生新的堆疊內容。- 頂層元素會依照在集合中顯示的順序堆疊。最後加入的項目會顯示在頂端。如要提升元素，請先移除再重新加入。
到目前為止，我們如何模擬頂層？開發人員在 body 結尾放置空白容器元素並不常見。而這會做為「擬真」的頂層。概念就是這個容器會排在堆疊中的其他項目上方。如要將某項內容置於所有內容之上，請將該內容附加到該容器。我們可以在 SweetAlert、reactjs-popup、Magnific Popup 等熱門套件中看到這種情況。
有了新的內建元件和 API (例如 <dialog> 和 "Popover")，您就不需要採用這些解決方法。您可以將內容置頂，
透過 UI 架構，我們可以將宣傳元素與元件對應的元件並存，但是，在 DOM 算繪時，這些變數通常會分開顯示。
使用頂層時，您在原始碼中放置元素的位置 (例如 <dialog>) 就是元素的宣告層級。無論元素在 DOM 中位於多深的層級，都會提升至頂層，您可以檢查元素是否位於預期位置，並與元件 HTML 一併顯示。這樣一來，您就能同時檢查 DOM 中的觸發元素和提升元素。舉例來說，如果觸發元素會進行屬性更新，這項功能就特別實用。由於元素會同時顯示，這也帶來了無障礙功能的額外好處。
如要說明頂層與 z-index 的高層，請考慮使用此示範。
在這個示範中，您可以開啟 SweetAlert 彈出式視窗，也可以開啟頂層 <dialog>。開啟 <dialog>，然後嘗試開啟 SweetAlert 彈出式視窗。您會看到它顯示在頂層元素下方。而 SweetAlert 彈出式視窗的根目錄使用 z-index 10000 與 position: fixed。
.swal-overlay {
z-index: 10000;
position: fixed;
}
您不需要為 <dialog> 套用任何樣式，即可讓 <dialog> 顯示在所有其他內容之上。
開發人員工具
接下來，我們來談談開發人員工具支援服務。Chrome 開發人員工具會新增對頂層元素的支援，方便您檢查頂層。這樣一來，您就能更輕鬆地偵錯，並以視覺化方式呈現頂層堆疊的內容，甚至是頂層的內容。
Alina Varkki 撰寫了一篇精彩文章，深入探討如何使用這些工具。目前在 Chrome Canary 105 版中提供這項功能的預先發布版。
就是這麼簡單！
頂層簡介。可對下列項目說「再見」：
.popup-container {
z-index: 10000;
}
您會將哪些內容推送至頂層？你試過 dialog 嗎？或者，您是否查看過 OpenUI Popover API？歡迎告訴我們！