認識最高層:Z-index:10000 的解決方案

在瀏覽器可視區域中,頂層圖層位於相關 document 上方,而每個 document 都有一個相關聯的頂層。這表示升級為頂層圖層的元素不需要擔心 z-index 或 DOM 階層。此外,玩家還能取得簡潔的 ::backdrop 虛擬元素。Fullscreen API 規格要詳細說明,因為在 dialog 支援推出之前,Fullscreen 是正在使用的頂層範例。

頂層有助於解決 document 其餘部分上方顯示內容的問題。

重要注意事項: - 頂層資料層不在 document 資料流之外。 - z-index 在頂層沒有作用。 - 頂層圖層中的每個元素都有樣式化的 ::backdrop 虛擬元素。 - 每個元素和 ::backdrop 都會產生新的堆疊內容。 - 頂層圖層中的元素會依照在集合中的顯示順序堆疊。最後一個動作會顯示在最上方。如要宣傳元素,請先移除再重新新增。

到目前為止,我們如何模擬頂層?開發人員在 body 結尾放置空白容器元素並不常見。而這會作為「擬真品」頂層資料層概念就是這個容器會排在堆疊中的其他項目上方。如果想把重點放在最上面,可以直接加進該容器我們可以在 SweetAlertreactjs-popupMagnific 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 開發人員工具新增對頂層元素的支援,方便你檢查頂層元素。如此一來,就能更輕鬆地偵錯,以及視覺化呈現在頂層或頂層項目的堆疊情況。

GIF 說明開發人員工具頂層支援的圖片

Alina Varkki 發布一篇實用文章,深入瞭解如何使用這些工具。目前 Chrome Canary 版本 105 提供預先發布版功能。

就是這麼簡單!

頂層簡介。讓大家明白「再見!」例如:

.popup-container {
  z-index: 10000;
}

你會如何推送至頂層圖層?您是否試用過 dialog?還是試試 OpenUI Popover API?歡迎告訴我們!