javascript 获取div相对于窗口的绝对位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3569869/
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
Get the absolute position of a div relative to the window
提问by smfoote
This questionis quite similar to what I want I'm looking for, but my situation is different enough, I think, to merit a new question.
这个问题与我想要寻找的问题非常相似，但我认为我的情况已经足够不同，值得提出一个新问题。
I have several divs positioned absolutely inside of a parent div (position: relative). I want to get the position of the children divs relative to the window. The jquery offset()method doesn't seem to work, because it gives me the offset from the parent div. Is there a way to get the absolute position of a div that has absolute position inside of a relative position div?
我有几个 div 绝对位于父 div ( position: relative) 内。我想获取子 div 相对于窗口的位置。jqueryoffset()方法似乎不起作用，因为它给了我与父 div 的偏移量。有没有办法获得在相对位置 div 内具有绝对位置的 div 的绝对位置？
Sample html:
示例 html：
<div id="parent" style="position:relative;">
<div id="child1" style="position:absolute; top:10px; left 8px;">Child 1</div>
<div id="child2" style="position:absolute; top:20px; left 8px;">Child 2</div>
</div>
采纳答案by Pointy
There's the .position()function too, however (though they're perpetually confusing to me) my understanding is backwards from what you've written: .offset()is relative to the document origin, while .position()is relative to the "offset parent".
也有.position()函数，但是（尽管它们总是让我感到困惑）我的理解与您所写的相反：.offset()相对于文档来源，而.position()相对于“偏移父级”。
I think it's the fact that the term "offset parent" contains the word "offset" that confuses me.
我认为是“偏移父级”一词包含“偏移”一词这一事实让我感到困惑。
回答by Jerome
Have you looked at .offsetParent(), you can traverse up to the window and get the total offset.
你看过吗.offsetParent()，你可以遍历到窗口并获得总偏移量。
See also http://www.sitepoint.com/forums/showthread.php?t=620402
回答by Silkster
I did a test with the html below. The value I get for offset is different than position. Is something else going on that changes where the parent div is positioned? If another element is getting added to the DOM after you check the position and offset values, then maybe you need to check position later. Maybe using inline style as opposed to using CSS classes makes a difference? (you will need to get json2.js from http://www.json.org/js.htm)
我用下面的html做了一个测试。我得到的偏移值与位置不同。是否还有其他事情会改变父 div 的位置？如果在您检查位置和偏移值后另一个元素被添加到 DOM，那么您可能需要稍后检查位置。也许使用内联样式而不是使用 CSS 类会有所不同？（您需要从http://www.json.org/js.htm获取 json2.js ）
<html><head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="script/json2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var position = {};
position.grandpa = { position: $("div.grandpa").position(),
offset: $("div.grandpa").offset() };
position.dad = { position: $("div.dad").position(),
offset: $("div.dad").offset() };
position.me = { position: $("div.me").position(),
offset: $("div.me").offset() };
alert(JSON.stringify(position));
});
</script>
<style type="text/css">
div.grandpa {
position: relative;
border: 3px solid blue;
padding: 10px;
background-color: White;
}
div.dad {
position: absolute;
top: 4px;
left: 4px;
border: 2px solid green;
padding: 10px;
}
div.me {
border: 1px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div class="grandpa">
John
<div class="dad">
Joseph
<div class="me">Justin</div>
</div>
</div>
</body>
</html>
回答by Eduardo B.
Hi Use the position () function of jQuery library.
Hi 使用jQuery 库的position() 函数。
Create a Div called Stage and another called Content. On Stage Div write position absolute, top and left. In Div Content type position absolute, top and left too.
创建一个名为 Stage 的 Div 和另一个名为 Content 的 Div。在 Stage Div 上写入绝对位置、顶部和左侧。在 Div 内容类型位置绝对，顶部和左侧。
Ok?
好的？
