頂層圖層位於瀏覽器可視區域中的相關 document 上方，且每個 document 都有一個相關聯的頂層圖層。這表示升級為頂層的元素不需要處理 z-index 或 DOM 階層。還可以使用有趣的 ::backdrop 虛擬元素來玩遊戲。全螢幕 API 規格詳細說明瞭 Fullscreen 是 dialog 支援前採用的頂層資料層。
頂層層可協助解決在 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 彈出式視窗的根層級使用了 10,000 的 z-index 和 position: fixed。
.swal-overlay {
z-index: 10000;
position: fixed;
}
您不需要將任何樣式套用至 <dialog>，就能讓它顯示在所有其他內容上方。
DevTools
這就是開發人員工具支援服務。Chrome 開發人員工具現已支援頂層元素，方便您檢查頂層元素。這樣就能輕鬆偵錯，以視覺化方式呈現項目在頂層或頂層的堆疊方式。
Alina Varkki 閱讀了一篇優質文章，深入探討這些工具的使用方式。目前這項功能是 Chrome Canary 105 版中的預先發布版功能。
就是這麼簡單！
概略介紹頂層。其他可說「再見！」這種說法的方式包括：
.popup-container {
z-index: 10000;
}
你想將哪些內容推送至頂層圖層？你體驗過 dialog 嗎？還是試試 OpenUI Popover API？歡迎告訴我們！