在瀏覽器可視區域中,頂層圖層位於相關 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?歡迎告訴我們!