在使用jquery的过程中，想取得当前点击input的绝对位置而去显示一个div，jquery本身提供offset和position这个两个方法，但position官方解释是relative to the offset parent，可以看到是针对父结点的，而offset官方解释relative to the document，貌似使用offset可以直接绝对定位。但是在网页中如果出现嵌套div的情况，top和left会叠加，因此这个时候如果要定位显示一个新的div就要把父亲结点的offset去掉，jquery提供了offsetParent这个方法
因此，如下代码可以在点击一个控件后，在其下方
在JavaScript和jQuery的世界里，获取元素的精确位置是常见的需求，尤其在动态定位元素或创建交互效果时。本文将深入探讨如何使用jQuery获取点击控件的绝对位置，并展示一个简单的实例。
jQuery提供了两个主要的方法来获取元素的位置：`offset()` 和 `position()`。它们之间的区别在于参考点不同：
1. `position()` 方法返回元素相对于其最近的定位父元素（`offset parent`）的偏移值。这意味着如果你有一个定位元素，它的`position()`值将反映出它与最近的定位祖先元素的关系。
2. `offset()` 方法则返回元素相对于文档（`document`）的顶部和左侧的偏移值，它是相对于浏览器窗口的绝对位置。在没有嵌套定位元素的情况下，`offset()` 可能是最直接获取绝对位置的方式。
然而，当涉及到嵌套的`div`或其他元素时，情况就变得复杂了。每个元素的`top`和`left`属性会根据其父元素的定位进行累积。在这种情况下，单纯使用`offset()`可能无法得到预期的结果，因为你还需要减去所有父元素的偏移量。
jQuery的`offsetParent()`方法可以帮助我们找到最近的定位父元素。通过递归地应用此方法，我们可以逐步减去每个父元素的偏移量，从而得到目标元素的绝对位置。
以下是一个示例代码，展示了在用户点击某个元素后，在该元素下方显示一个绝对定位的`div`：
```javascript
$(document).ready(function() {
$('#id').click(function(event) {
var curleft = $(event.target).offset().left;
var curtop = $(event.target).offset().top + $(event.target).outerHeight();
var obj = $(event.target);
// 获取控件绝对位置
while (obj.attr('tagName').toLowerCase() != 'body') {
curleft = curleft - obj.offset().left;
curtop = curtop - obj.offset().top;
obj = obj.offsetParent();
}
// 设置div的位置
$('#div').css('top', curtop + 'px').css('left', curleft + 'px');
});
});
```
在这个示例中，`event.target` 是被点击的元素，我们首先获取它的初始偏移量，然后通过循环计算所有祖先元素的偏移量并进行相应减法。我们将结果应用到`#div`的样式中，使其出现在点击元素的正下方。
请注意，这个例子假设`#div`已经存在于DOM中，且其初始样式设置为绝对定位。如果没有，你需要先将其插入DOM，或者在代码中添加相应的CSS规则。
理解`offset()`、`position()`和`offsetParent()`的区别对于在jQuery中进行精准的元素定位至关重要。在处理复杂的布局和嵌套元素时，使用这些方法的组合可以确保你获取到准确的元素位置，进而实现预期的动态效果。
