jQuery获取元素相对于另一个元素的位置答案

【问题标题】：jQuery get position of element relative to another elementjQuery获取元素相对于另一个元素的位置
【发布时间】：2011-12-01 14:09:08
【问题描述】：

所以我有一个像这样的 div：

<div class="uiGrid">

<div class="trigger"></div>

</div>

我想知道触发到 uiGrid 的位置并尝试了这两个：

$('.trigger').offset('.uiGrid');

$('.trigger').position('.uiGrid');

但都没有得到它。偏移量是相对于文档的，位置是相对于父元素而不是指定元素的。

我该怎么做？谢谢

【问题讨论】：

尝试在 CSS 中将包装 div 的位置更改为相对位置。 [stackoverflow.com/questions/2842432/…

标签： jquery

【解决方案1】：

你自己做减法...

var relativeY = $("elementA").offset().top - $("elementB").offset().top;

【讨论】：

实际上没有offset().y这样的东西@它是offset().top
在 Chrome 上完美运行，但 Firefox 给出完全不同的数字?
对于我的用例，由于 Firefox 的数字有一点偏差，我所做的只是将relativeY 循环到最接近的十分之一?

【解决方案2】：

你可以在这里做的基本上是，从子属性值中减去父属性值。

var x = $('child-div').offset().top - $('parent-div').offset().top;

【讨论】：

把这些减值放在哪里？
谢谢”。抱歉，我忘记通过分配给变量来显示它。所以你要做的就是定义一个变量并分配减法值。 var x = $('child-div').offset().top - $('parent-div').offset().top;
为什么您觉得在发布已接受的答案 2.5 年后需要发布多余的答案？
它阐明了从另一个元素中减去哪个元素的位置。查看孩子/父母与 A/B
@MaxStrater 也许吧。但他们本可以对原始答案发表评论，或者至少对 OP 给予某种赞誉。

【解决方案3】：

你没抓住重点......

除此之外，试试：

myPosY = $('.trigger').offset().left - $('.uiGrid').offset().left;
myPosX = $('.trigger').offset().top - $('.uiGrid').offset().top;

【讨论】：

哦，但是：myPosY 位于顶部，myPosX 位于左侧

【解决方案4】：

对我来说，问题是我在一个带有滚动条的 div 中，而且我必须能够考虑到根元素的隐藏部分。

如果我使用“.offset()”它给了我错误的值，因为它没有考虑到滚动条的隐藏部分，因为它是相对于文档的。

但是，我意识到“.offsetTop”属性相对于其第一个定位的父级 (offsetParent) 始终是正确的。所以我做了一个循环，通过添加“.offsetTop”的值递归到根元素：

我为此做了自己的 jquery 函数：

jQuery.fn.getOffsetTopFromRootParent = function () {
    let elem = this[0];
    let offset = 0;
    while (elem.offsetParent != null) {
        offset += elem.offsetTop;
        elem = $(elem.offsetParent)[0];
        if (elem.offsetParent === null) {
            offset += elem.offsetTop;
        }
    }
    return offset;
};

我想你也可以使用“.offsetLeft”...

如果要获取元素相对于另一个元素的位置来回答问题：

let fromElem = $("#fromElemID")[0];
let offset = 0;
while (fromElem.id.toUpperCase() != "toElemID".toUpperCase()) {
    offset += fromElem.offsetTop;
    fromElem = $(fromElem.offsetParent)[0];
}
return offset;

如果元素 (offsetParent) 具有 CSS，则称其已定位相对、绝对或固定的位置属性。

【讨论】：