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

【问题标题】：How to know the z-index of two elements如何知道两个元素的 z-index
【发布时间】：2021-07-02 06:07:43
【问题描述】：

我有两个旋转木马，其中一个设置为绝对，并且在它们上方有一个切换按钮，当我切换到第二个时，它会将它们切换出去。

我无法点击它，我感觉错误来自 z-index 但我没有在任何元素上设置任何 z-index，是否有插件可以查看它们的 z-index？

【问题讨论】：

你应该能够使用 javascript 来获取元素 z-index 像这样； console.log(document.getElementById("element").style.zIndex);
请向我们展示您的代码。该按钮可以被这些轮播之一或其他元素覆盖。
你可以试试这个：chrome.google.com/webstore/detail/devtools-z-index/…
请注意，虽然到目前为止的所有答案都向您展示了如何查找元素是否应用了 z-index，但没有一种方法会告诉您元素属于哪个 stacking context

【解决方案1】：

也许我错过了问题的重点，但只需在 Firefox 或 Chrome 上使用“检查”即可让您查看所有元素的所有样式属性。

到达那里：

如您所见，该页面的标题的 z-index 值为 5050

【讨论】：

【解决方案2】：

您可以获取元素，然后提取样式。然后就可以通过css属性名的驼峰式来获取style属性的值了。

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

const zIndex = style.zIndex;

console.log(zIndex);

【讨论】：

【解决方案3】：

如果你使用的是chrome，可以在开发者工具中查看。

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

【讨论】：