JQuery Offset 返回 2 个不同的结果答案

【问题标题】：JQuery Offset returns 2 different resultsJQuery Offset 返回 2 个不同的结果
【发布时间】：2014-01-19 22:57:43
【问题描述】：

我为此苦苦挣扎的时间比我愿意承认的要长。我正在尝试使用 jQuery Offset 将页面上的一些元素放在另一个页面的正下方，但即使我传递了相同的偏移值，渲染到屏幕的值也大不相同。我的 jQuery 代码如下所示：

init: function (element, options) {
    var that = this,
    $field = $(element),

    ...

    var offset = $field.offset();
    that.ghostElement.offset({ top: offset.top, left: offset.left });
    that.suggestionsContainer.offset({ top: offset.top + $field.height(), left: offset.left });

但 html 呈现如下：

<span class="autosuggest-ghost" style="top: 48px; left: 30px;"></span>

<div class="autosuggest-suggestions" style="top: 262px; left: 263.5px; display: block;">       
    <ul>
        <li><a blah...</a></li>
    </ul>
</div>

人们会认为自动建议会是顶部：48 + 40，左侧：30，但由于某种原因，它要大得多。任何帮助将不胜感激。

编辑

Html 元素是紧挨着的，但是没有不同的父元素； autosuggest-ghost 有一个位置：absolute，而 autosuggest-suggestions 有一个位置：absolute。这是因为 autosuggest-suggestions 需要浮动在页面上的其他元素之上。

【问题讨论】：

offset() 是相对于窗口的，你确定你不是在寻找position() 吗？
这两个元素真的是一个接一个地出现在你的问题中，还是真正的文档结构不同？我怀疑它们有不同的父元素，autosuggest-ghost 在相对或绝对定位的元素内。

标签： javascript jquery html offset

【解决方案1】：

offset() 是相对于文档的，所以数字是准确的，但以奇怪的方式表示……这完全取决于您如何设置其余元素和 CSS。 Position() 是相对于父对象的。但是如果你不能完全确定你的 CSS 发生了什么，这仍然会导致一些问题。

【讨论】：