如何知道两个元素的 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);