Div在另一個Div中的相對位置

Question

如何獲得Div相對於其父Div的位置？ 使用.position()和.offset()總是讓我知道它在文檔中的位置。

---

HTML：

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

---

CSS：

假設frame以margin: auto;為中心margin: auto; 和width: 1024px 。

inner left: 300px; ， top: 200px ， position: relative; 。

我想要的是：

一個很好的函數，用於獲取inners位置數據300和200 （例如，使用.css('left')等時不帶px .css('left') 。

有沒有什么？

Answer 1

如果給父對象一個“相對”的“位置”，則應使用.position()作為它在父對象內部的位置。

實際上，使用.offset 始終應根據document其位置，而使用.position可以根據其“位置”不是“靜態”（默認值）的第一個父項為其提供“位置”。

例子如下：

http://jsfiddle.net/Z2VNx/

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

第一個示例使用<br />在容器頂部添加空間，而第二個示例使用padding-top在容器padding-top添加空間。 兩者都返回一個大於0的值作為孩子的top排名。

唯一的問題是， position在計算孩子的position並未考慮孩子的邊距，邊距和邊框。 這是因為所有這些都是元素的一部分，因此即使您可能看不到它們，也不會將它們包含在元素的位置計算中。 因此，當然，根據要查看元素位置的確切位置，需要將其添加到.position結果中。 某些人希望“位置”返回到邊框的左上角位置，這意味着要增加邊距。 像這樣：

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