javascript - Div 在另一个 Div 中的相对位置

Question

如何获取 Div 相对于其父 Div 的位置？使用 .position() 和 .offset() 总是可以给我它在文档中的位置。

<小时/>

HTML:

<div id="frame">
   <div id="inner"></div>
</div>

<小时/>

CSS:

假设 frame 以 margin: auto; 和 width: 1024px 为中心。

inner 具有 left: 300px;、top: 200px 和 position:relative;。

我想要什么:

一个很好的函数，用于获取 inners 的位置数据 300 和 200(例如，使用时没有 px .css('left') 等

有什么吗？

Answer 1

如果您给父级“相对”的“位置”，则使用 .position()应该是它在父级内部的位置。

使用.offset实际上应该始终根据 document 为您提供其位置，同时使用.position根据其第一个父级(其“位置”不是“静态”(默认))为您提供其“位置”。

示例如下:

http://jsfiddle.net/Z2VNx/

http://jsfiddle.net/Z2VNx/1/

第一个示例使用 <br />在容器顶部添加空间，而第二个示例使用 padding-top在容器顶部添加空间。两者都返回大于 0 的值为 child top位置。

唯一的问题是position在计算其位置时，不考虑子级的边距、填充和边框。这是因为所有这些都是元素的一部分，因此即使您可能看不到它们，它们也不会包含在元素的位置计算中。因此，当然，根据您想要查看其位置的元素的具体部分，您需要将其添加到 .position 的结果中。有些人希望“位置”返回到边框的左上角位置，这意味着添加边距。像这样的事情:

http://jsfiddle.net/Z2VNx/2/