如何知道两个元素的z-index

Question

我有两个旋转木马，其中一个设置为绝对旋转木马，上面有一个切换按钮，当我切换到第二个旋转木马时，它会将它们关闭。

我点不进去，我感觉是z-index的错误，但是我没有在任何元素上设置任何z-index，有没有插件可以查看他们的z-index？

Answer 1

也许我错过了问题的重点，但只需在 Firefox 上使用 'inspect' 或 Chrome 就可以让您看到所有元素的所有样式属性。

到达那里：

1. 右击你想要的元素
2. Select 'inspect element'

如您所见，此页面的 header 的 z-index 值为 5050

Answer 2

您可以获取元素，然后提取样式。然后你可以通过对 css 属性名称使用驼峰命名来获取样式 属性 的值。

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

const zIndex = style.zIndex;

console.log(zIndex);

Answer 3

如果您正在使用chrome，您可以在开发者工具中查看。

右键单击要检查的元素并检查元素。切换到开发人员工具中的元素选项卡，然后单击 computed 选项卡。它按字母顺序显示所有计算样式。