CSS 浏览器开发者工具：HTML 元素的位置是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26820942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Browser developer tools: what is the Position of the HTML element?
提问by user2864740
Modern Web Developer tools (in Chrome / FF / IE, eg.) provide a way to see the "Box Model" and "Computed CSS Properties" of a particular element. However;
现代 Web 开发工具（例如在 Chrome / FF / IE 中）提供了一种查看特定元素的“框模型”和“计算的 CSS 属性”的方法。然而;
Is there a way to monitor the finalcomputed/layout position easily with such tools?
有没有办法使用此类工具轻松监控最终计算/布局位置？
Preferably absolute, but within the parent container is also suitable. I am amendable to using any of the previously mentioned [Windows] browsers, but prefer to use Chrome.
最好是绝对的，但在父容器内也是合适的。我可以使用前面提到的任何 [Windows] 浏览器，但更喜欢使用 Chrome。
回答by Wayne Maurer
In Chrome, Firefox, Edge and IE11+, when an element is selected, you can access this element in the console window by typing:
In Chrome, Firefox, Edge and IE11+, when an element is selected, you can access this element in the console window by typing:
$0
$0
You can then query and manipulate using the Javascript DOM API, which has a very useful method called Element.getBoundingClientRect().
然后，您可以使用Javascript DOM API进行查询和操作，该API有一个非常有用的方法，称为Element.getBoundingClientRect()。
So all you have to do is type the following into the console window when an element is selected:
因此，您所要做的就是在选择元素时在控制台窗口中键入以下内容：
$0.getBoundingClientRect()
$0.getBoundingClientRect()
and the browser will return an object such as:
浏览器将返回一个对象，例如：
{ x: 1081, y: 72, width: 49, height: 28, top: 72, right: 1130, bottom: 99, left: 1081 }
{ x: 1081, y: 72, width: 49, height: 28, top: 72, right: 1130, bottom: 99, left: 1081 }
回答by dwilson
Chrome dev tools -> Settings -> General -> Elements -> Show Rulers.
Chrome 开发工具 -> 设置 -> 常规 -> 元素 -> 显示标尺。
You can also install Chrome plugins that will give you a little more functionality.
您还可以安装 Chrome 插件，为您提供更多功能。
