Chrome Dev工具:使用元素选择工具时，主体元素覆盖其他元素
Chrome Dev工具是一款由Google开发的用于Web开发和调试的工具。其中的元素选择工具是该工具中的一个重要功能，它可以帮助开发人员在网页中选择和检查特定的HTML元素。
当使用元素选择工具时，主体元素可能会覆盖其他元素。这是因为在网页中，元素可以通过CSS的定位属性（如position: absolute或position: fixed）进行定位，从而使其在页面上覆盖其他元素。在使用元素选择工具时，主体元素可能会被优先选择和显示，以便开发人员可以更方便地查看和编辑该元素的属性和样式。
主体元素覆盖其他元素可能会对开发人员的调试工作造成一定的困扰，因为其他元素可能被遮挡或难以选择。为了解决这个问题，开发人员可以尝试以下方法：
- 使用层叠顺序（z-index）属性：如果主体元素使用了position: absolute或position: fixed，并且覆盖了其他元素，可以通过调整其z-index属性来改变元素的层叠顺序，使其在其他元素之下或之上显示。
- 使用Chrome Dev工具中的其他功能：除了元素选择工具，Chrome Dev工具还提供了其他功能，如控制台、网络面板、源代码查看器等。开发人员可以利用这些功能来进一步分析和调试页面中的元素和代码。
- 修改页面代码：如果主体元素的覆盖效果是由于页面代码中的错误或冲突引起的，开发人员可以尝试修改代码以解决问题。例如，可以调整元素的定位属性、修改CSS样式或调整HTML结构等。
总之，Chrome Dev工具的元素选择工具是一个强大的调试工具，可以帮助开发人员在网页中选择和检查特定的HTML元素。尽管主体元素可能会覆盖其他元素，但开发人员可以通过调整层叠顺序、利用其他工具功能或修改页面代码来解决这个问题。对于更多关于Chrome Dev工具的详细信息，可以参考腾讯云的Chrome DevTools产品介绍页面：Chrome DevTools产品介绍。
相关·内容
2回答
css样式正在被element.style覆盖。
css、twitter-bootstrap、slider
我有一个带有箭头按钮的图像幻灯片(CSS样式、slidePrev和slideNext)。然而，我不能让按钮显示一半的图像，而是它们出现在顶部。
下面是应该工作的CSS代码
#fwslider .slideNext {
position: absolute;
top:50%;
right:-50px;
z-index: 10;
}
然而，这种风格被某种叫做element.style的东西所覆盖(它可能来自Bootstrap?)。Chrome不知道源在哪里：
有人知道什么在改写我的风格吗？我甚至不知道如何调试这一点，所以任何技巧都值得赞赏。
浏览 4提问于2021-12-18得票数 0
1回答
CSS:用z索引覆盖固定元素
html、css、css-position、fixed
HTML：
<div class="wrap">
<div class="fixed"></div>
</div>
<div class="cover"></div>
CSS：
.cover{z-index: 10;}
.wrap{position: relative; z-index: 1;}
.fixed{position: fixed; display: block; z-index: 1;}
Exampale：
在页面上，滚动.cover元素隐藏在.fix
浏览 5提问于2014-04-16得票数 3
回答已采纳
1回答
CSS无关元素夹在其他元素之间
html、css、z-index
假设我在右上角有一个固定位置标头(position: fixed)和一个倾斜的<h1>元素(tranform: rotate(33.3deg))。如何让主内容滚动到<h1>元素下，而不是父<header>元素上？
我试过使用直接的z-index规则，它在火狐中有效，但在chrome中不起作用。
所以简而言之：
header {
position: fixed;
top: 0;
right: 0;
z-index: 0;
}
header h1 {
transform: rotate(33.3deg);
z-in
浏览 0提问于2013-07-09得票数 0
回答已采纳
4回答
使用Chrome扩展将CSS注入到文档检查器中
google-chrome、google-chrome-extension
我目前正在尝试编写一个扩展来改变文档检查器("devtools.css")的CSS。我使用Content Scripts和Match Pattern将CSS注入到其他网页中没有任何问题，但它似乎不能针对Inspector。是我漏掉了什么，还是有更好的方法来解决这个问题？
结果:在检查了之后，我注意到哪里出错了，模式部分对它所允许的URL类型是非常严格的，"chrome-devtools“不在其中。
更新:经过几个小时的工作，我已经开始使用实验性的API在Inspector中生成一个新的面板，但仍然没有成功地将css注入到它的父级中。
浏览 4提问于2011-07-25得票数 4
回答已采纳
3回答
如何在单步执行Chrome中的JavaScript断点时查看DOM？
javascript、debugging、dom、google-chrome-devtools、dom-traversal
在Chrome DevTools中，在源标签中调试调试器时(在JS代码中添加“JavaScript；”行，然后使用F10/F11单步执行代码)，如何在单步执行代码的同时查看DOM？
如果我的JS正在操作DOM，我通常需要逐步执行JS调试器并观察JS是如何修改DOM元素的。例如，我可能必须查看元素是如何移动的，它们是否在应该被移除的时候被移除，它们是否在正确的时间获得了正确的类，等等。
必须在Sources选项卡和Elements选项卡之间来回切换才能查看我执行的每一行的DOM是如何修改的，这阻碍了我的调试，使我无法判断每一行是如何影响DOM的。
如何在单步执行代码的同时查看元素？
浏览 4提问于2017-03-21得票数 9
14回答
职位:修正谷歌Chrome不工作
css、google-chrome、css-position
我在谷歌Chrome的“固定”元素上遇到了一些麻烦。该元素在其他主要浏览器中的行为与其应有的行为相同。
下面是CSS：
#element {
position: fixed;
bottom: 0px;
width: 100%;
height: 50px;
z-index: 10;
}
问题是，当页面加载时，元素按其应有的方式固定在视图端口的底部。在滚动时，它将保持在页面加载时的相同位置--它不会固定在屏幕的底部。
浏览 7提问于2013-12-10得票数 15
回答已采纳
2回答
Z-索引不处理父级为固定位置的元素。
html、css、css-position、z-index
我有一个网页应用程序，上面和下面的元素(div)，他们都有position: fixed。这些元素中的每一个都有子元素(弹出窗口)，其中也有position: fixed。
我想把弹出弹出放在父元素上面。但是，由于我使用的是position: fixed，所以z-index属性无法工作，因为它是从父级继承的。
我在堆栈溢出中看到了类似的问题，但是它们都没有为这个问题提供解决方案。
参见html/css at：
<html>
<head></head>
<body style="height: 100%;">
<di
浏览 5提问于2016-09-13得票数 1
回答已采纳
1回答
引导模式背景创建模型在可访问的铬...在firefox中工作
css、twitter-bootstrap
Bootstrap modal 在 Firefox 中正常运行，但在 google chrome 中存在一些问题， 如果我删除以下代码，那么它正在 chrome 中运行： .modal-backdrop.modal-absolute{
position: relative;
background-color : red;
z-index: 940;
}
.modal-backdrop.fade.in {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 103
浏览 3提问于2014-02-17得票数 0
1回答
移动屏幕阅读器不会在屏幕外或HTML文档中较低的“Z-index`”项上“单击”
android、html、ios、css、screen-readers
是我错了还是移动屏幕阅读器不能“点击”屏幕外的项目？如果我有一个项目被移出主屏幕，如下所示：
.button {
position: absolute;
left: -9999px;
}
在聚焦时双击它似乎不起作用，安卓和IOS都不起作用。事实上，使用较低的z-index值定位在具有较高z-index值的其他项目之后的项目似乎也是无法到达的。例如：
.below-button {
position: absolute;
z-index: 1;
}
.top-layer {
position: absolute;
z-index: 2;
}
如果
浏览 0提问于2017-03-21得票数 0
3回答
如何避免在自动UI测试中中断CSS路径/XPath引用？
user-interface、testing、selenium、xpath、testng
我有一组TestNG测试，用于测试基于web的UI。
例如，一个典型的测试会单击不同的菜单和按钮，并断言结果就是我们所期望的结果。
这些测试还在后台使用Selenium。我的测试在一个班级，一个网页的模型在另一个班级。
要获得对网页中UI组件(按钮、菜单等)的引用，我使用CSS或XPath选择器。这是在模型类中硬编码的。为了获得表示UI组件的对象，我调用模型类中的get方法，该方法使用css选择器为UI组件返回一个对象。然后使用该对象，我可以单击、选择、取消选择或对组件执行任何操作。
这一切正常工作，除非css选择器改变。
有什么办法可以避免这种情况吗？
我在想，如果我可以通过遍历每个步骤或单
浏览 8提问于2015-05-06得票数 2
回答已采纳
7回答
Chrome 84检查元素，查找未像以前那样以黄色突出显示的结果
google-chrome、xpath、google-chrome-devtools、inspect
像往常一样，在进行自动化测试时，我使用Chrome中的"Inspect"(CTRL+SHIFT+I)通过xpath、id、CSS选择器等来查找元素。例如：
//li/a[contains(text(), "Products")]
上面是来自该页面的xpath。在以前版本的Chrome浏览器中，在按CTRL+F打开"Find“选项并粘贴此xpath元素后，在DevTools窗口中会突出显示"DevTools"/"Elements”。在新版本的chrome中，它不会突出显示，通常的"1/1“结果显示在”查找“选项卡的最右侧。
浏览 9提问于2020-07-18得票数 23
1回答
更改object.style.alignSelf的值
javascript、css
假设我有一个通过JS更改Align Self css属性的函数。
HTML
<img id= "arrow" src="/images/leftarrow.svg">
CSS
.container {
background-color: $white;
box-shadow: 2px 0px 4px 1px black;
width: 400px;
height: 100vh;
display: flex;
flex-direction: column;
visibility: visible;
浏览 0提问于2021-04-25得票数 0
6回答
如何控制html中的`div`重叠
css、html、overlap
我正在创建一个网页，并且我有两个div，例如A和B。A的位置是fixed，它在页面的顶部，而B的位置是absolute，在页面的中间。当它们重叠时，B在A之上，但我希望这是相反的。我想让A在任何事情之上，但我不知道该怎么做。
请注意，改变他们的定位不是一种选择。
提前谢谢你。:)
浏览 0提问于2013-03-16得票数 5
回答已采纳
2回答
ids和类之间的css视觉差异
html、css
这非常奇怪，但请查看以下html和css。只要我将table和tableWrapper保留为元素，并为它们定义ids，就可以很好地工作
如果我试图使它们成为类(将#更改为.在css中)，并将html元素上的id更改为类，那么circle类就不再包含在tableWrapper中(它们超出了它的边界)。我真的大吃一惊，因为我从来没有想过某个东西是id或class会对布局产生影响，但我在IE10和google chrome v25上都看到了这种情况。
我不是在寻找这个特定问题的解决方案。我正在寻找理解，并希望一些链接到一些w3c文档，解释为什么会发生这种情况，以及我可以对此有什么期望。
浏览 0提问于2013-03-10得票数 0
3回答
如何在页面刷新时保留Chrome DOM断点？
html、google-chrome、debugging、dom、google-chrome-devtools
我想看看是什么代码在修改网页上的DOM元素，所以我在Chrome中设置了一个断点，方法是右键单击DevTools检查器的Elements选项卡中的元素，然后选择"Break on...“-> "Subtree Modifications”。脚本在页面加载时(而不是之后)修改元素，所以我希望保留DOM断点并刷新页面。
在javascript代码中保存断点的过程似乎不适用于DOM断点。
浏览 1提问于2015-12-16得票数 18
1回答
确定DOM元素创建者？
javascript、dom、frontend
我正在尝试调试一个托管来自多个供应商的前端代码的网页。我想要做的是理解是什么脚本创建了页面中的特定元素。有没有什么调试工具可以让我这样做(追踪DOM元素的起源)？我在常见的调试工具(Chrome等)中找不到这样的功能。
谢谢!
浏览 1提问于2014-03-10得票数 0
1回答
字体-当页面变小时，很棒的图标会移动
html、css、twitter-bootstrap
/*图标片段*/
.social {
margin-top: px;
padding: 0;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%,-50%);
}
.social li {
list-style: none;
float: left;
margin: 0px;
width: 60px;
height: 10px;
line-height: 60px;
text-align: center;
background: #;
border-rad
浏览 2提问于2018-02-28得票数 0
回答已采纳
2回答
基本上就是创建一个带有下拉菜单的网页，这是我在教程之后写的。我的页面布局由三个单独的表格组成，其中一个用于标题/横幅，一个用于下拉菜单，一个用于正文/内容。
我首先遇到的问题是，当我滚动下拉菜单时，它会落在我的body/content表的后面。我找到了一个解决这个问题的方法，就是包含z-index:-1。这在IE中工作得很好，但在chrome中测试后，它阻止了链接和iframe在内容/正文表上进行交互。
#bodytable {width:1100px;
height:100%;
margin:auto;
position:relative;
浏览 1提问于2013-01-06得票数 0
1回答
背景颜色是从哪里来的？
css、internet-explorer
我正在显示一个链接
<li>
<a id="bilg" href="phonelist_5.cfm?bilingual">
<img src="icon-bilingual2.png" width="16" height="16" alt="" style="margin-bottom:-3px; display: inline-block;" />
Bilingual
</a>
<
浏览 6提问于2015-01-03得票数 0
3回答
在初始加载后阻止Chrome/Firefox中的AJAX请求
google-chrome、firefox、google-chrome-devtools
我正在尝试在Chrome中调试页面。每隔几秒钟，页面就会发出一次AJAX请求，更新页面上的元素。是否有DevTools选项来停止这些页面请求？这使得调试HTML/CSS变得困难，因为DOM被重置了。
浏览 0提问于2014-02-12得票数 11
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
