jQuery jQuery获取元素相对于另一个元素的位置
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8342667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery get position of element relative to another element
提问by Cameron
So I have a div like:
所以我有一个像:
<div class="uiGrid">
<div class="trigger"></div>
</div>
And I want to know the position of trigger to uiGrid and have tried both these:
我想知道 uiGrid 的触发器位置并尝试了这两种方法:
$('.trigger').offset('.uiGrid');
$('.trigger').position('.uiGrid');
but neither get it. Offset is relative to the document and position is relative to the parent and not the specified element.
但都不明白。偏移量相对于文档,位置相对于父元素而不是指定元素。
How would I do this? Thanks
我该怎么做?谢谢
回答by Ya Zhuang
just do the subtraction your self...
做减法你自己...
var relativeY = $("elementA").offset().top - $("elementB").offset().top;
var relativeY = $("elementA").offset().top - $("elementB").offset().top;
回答by Prabath Rathnayake
what you can do here is basically, subtract parent property value from child property value.
您在这里可以做的基本上是,从子属性值中减去父属性值。
var x = $('child-div').offset().top - $('parent-div').offset().top;
回答by Jorden van Foreest
You're missing the point here....
你在这里错过了重点......
Besides that, try:
除此之外,请尝试:
myPosY = $('.trigger').offset().left - $('.uiGrid').offset().left;
myPosX = $('.trigger').offset().top - $('.uiGrid').offset().top;
回答by A. Morel
The problem for me was the fact that I was in a div with a scrollbar and that I had to be able to take into account the hidden part down to the root element.
对我来说,问题是我在一个带有滚动条的 div 中,我必须能够考虑到根元素的隐藏部分。
If I use ".offset()" it gave me wrong values, because it does not take into consideration the hide part of scrollbar as it is relative to the document.
如果我使用“.offset()”,它会给我错误的值,因为它没有考虑滚动条的隐藏部分,因为它是相对于文档的。
However, I realized that the ".offsetTop" property relative to its first parent positioned (offsetParent) was always correct. So I made a loop to go recursively to the root element by additionning the values of ".offsetTop":
但是,我意识到“.offsetTop”属性相对于它的第一个父定位(offsetParent)总是正确的。所以我做了一个循环,通过添加“.offsetTop”的值来递归地到达根元素:
I did my own jquery function for that:
我为此做了我自己的 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;
};
You can use the same with ".offsetLeft" I suppose...
我想你可以将它与“.offsetLeft”一起使用......
If you want to get position of element relative to another element to answer the question:
如果您想获取元素相对于另一个元素的位置来回答问题:
let fromElem = $("#fromElemID")[0];
let offset = 0;
while (fromElem.id.toUpperCase() != "toElemID".toUpperCase()) {
offset += fromElem.offsetTop;
fromElem = $(fromElem.offsetParent)[0];
}
return offset;
An element (offsetParent) is said to be positioned if it has a CSS position attribute of relative, absolute, or fixed.
如果元素 (offsetParent) 具有相对、绝对或固定的 CSS 位置属性,则称该元素已定位。