☰

检查 Chrome 中的重叠元素

tag-icon • tag-icon google-chrome
检查 Chrome 中的重叠元素

在 Chrome 开发者工具中，使用检查元素工具，如果页面上的两个元素占据相同的空间，则只有 z-index 最高的元素似乎可以通过鼠标访问。如果光标位置下有多个元素，是否有一些键盘快捷键或其他方法可以循环显示元素？

这是一个糟糕的例子：

在此处输入图片描述

有一个带红色边框的 div 位于另一个带蓝色边框的 div 后面，并且完全位于其内部。使用检查器工具将鼠标悬停在红色 div 上会选中蓝色 div。我可以用鼠标选中红色 div 吗？

我还注意到，即使右键单击红色区域并选择“检查元素”，也会检查蓝色元素而不是红色元素。因此，该行为不仅限于检查元素工具。

答案1

这种行为不仅限于 Chrome 中的检查元素工具，也存在于我曾经尝试过的每个浏览器和此类工具中。

当我想删除一个无法选择的元素时，我的解决方案是打开开发工具，尽可能靠近问题元素，在 HTML 中找到它，单击即可选择此元素，然后从那里将其删除。

此方法适用于所有带有开发工具的浏览器，基本上所有浏览器都适用。虽然工作量较大，但每次都很有效。

答案2

我编写了以下 HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
#myBlue {
    position: fixed;
    z-index: 100;
border 5px #040BA6 solid;        left: 10px;
    top: 10px;
    width: 200px;
    height: 250px;
    background-color: aqua;
    display:block;
}
#myRed {
    position: fixed;
    z-index: 150;
border 5px #EE0E12 solid;        left: 20px;
    top: 40px;
    width: 50px;
    height: 50px;
    display:block;
    background-color:lightpink ;
}
body{
    background-color: azure;
}
</style> 
</head>

<body>
    <div ID="myRed" contenteditable>&nbsp;&nbsp;&nbsp;</br>&nbsp;&nbsp;&nbsp;</br>&nbsp;&nbsp;</div>
    <div ID="myBlue" contenteditable>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</br>&nbsp;&nbsp;&nbsp;&nbsp;</div>
</body>
</html>

这是我使用 Chrome 的开发工具检查时得到的结果：https://youtu.be/Nkeo938T804。我认为这就是你想要的，所以对我来说它很好用。这肯定是版本问题。我在 Win 10 2020 上安装了 MS Edge 86。我尝试使用 Chromium 88，它也运行良好。祝你好运

相关内容