如何知道兩個元素的 z-index

Question

我有兩個旋轉木馬，其中一個設置為絕對，它們上方有一個切換按鈕，當我切換到第二個時，它會將它們切換出去。

我無法點擊它，我覺得錯誤來自 z-index 但我沒有在任何元素上設置任何 z-index，是否有插件可以查看它們的 z-index？

Answer 1

如果您使用的是 chrome，您可以在開發人員工具中檢查它。

右鍵單擊要檢查的元素並檢查元素。 切換到開發人員工具中的元素選項卡，然后單擊計算選項卡。 它按字母順序向您顯示所有計算的 styles。

Answer 2

也許我錯過了問題的重點，但只需在 Firefox 或 Chrome 上使用“檢查”即可讓您查看所有元素的所有樣式屬性。

到那里：

1. 右鍵單擊您想要的元素
2. Select '檢查元素'

如您所見，此頁面的 header 的 z-index 值為 5050

Answer 3

您可以獲取元素，然后提取 styles。 然后，您可以通過使用駝峰式為 css 屬性名稱來獲取 style 屬性的值。

const style = getComputedStyle((document.getElementById("element"));

const zIndex = style.zIndex;

console.log(zIndex);