jQuery offset（）.top是否与浏览器不兼容？

我试图将一个元素放在其他元素的正下方，但我遇到了一个问题，当页面向下滚动时，offset（）会为IE和其他浏览器返回不同的值

IE返回相对于可见区域顶部的位置（即向下滚动时下降），而Firefox和Chrome总是返回相同的值，而不管滚动（我认为这是一种更好的行为）

只是想澄清一下：困扰我的是，如果父元素中没有一个是相对定位的，那么offset（）和position（）会为IE返回不同的值，这取决于您向下滚动的距离，但jQuery文档中从未提到过这一点。为什么会这样？是否有任何方法可以绕过它，而不需要对html结构进行任何更改（例如，我想对许多字段重用一个日期选择器，只需稍微重新定位它）

---

有人遇到过同样的问题吗？

详细说明griegs答案您可以将其附加到相同的包含DOM元素，然后使用

.position（）

而不是

.offset（）

，因为它将基于父元素而不是文档引用位置。可能会给你更好的结果

编辑 格里格删除了他的答案，他是这么说的：

不，但我在其他项之后使用Append-to-Append-items。 因此，如果您的元素在一个div中，您将附加 将新元素添加到Div中，使其成为 出现在底部

---

这应该是可行的，尽管它可能需要相对定位

elem

的父元素

var elem = $("#elementToShowCalenderUnder");
var pos = elem.position();
$("#yourCalender").css({
  position: "absolute",
  left: pos.left() + "px";
  top: pos.top() + elem.height() + 5 + "px";
}).insertAfter(elem);

查看我的测试，拖动红色div进行测试

HTML

Javascript

$('document').ready(function(){
    var top = $('#hook').offset().top + $('#hook').height()+20;
    var left = $('#hook').offset().left;

    $('#hanger').css('top', top);
    $('#hanger').css('left', left);

    $('#hook').draggable({
        start: function(){
            $('#hanger').toggle();
        },
        stop: function(){
                var top = $('#hook').offset().top + $('#hook').height()+20;
                var left = $('#hook').offset().left;

                $('#hanger').css('top', top);
                $('#hanger').css('left', left);

                $('#hanger').toggle();
        }
        });
});

---

IE8没有pageX或pageY属性，这些属性为您提供事件相对于页面而不是浏览器窗口的位置。要解决此问题，您可以通过检查滚动位置来计算您的位置，如以下代码示例所示：

...
var view = this;
var currEl = evt.currentTarget.graphic.element; //evt.toElement;
//Determine the coordinates to offset the positioning of the context menu by
var posx = 0;
var posy = 0;
if (evt.pageX || evt.pageY) {
    posx = evt.pageX;
    posy = evt.pageY;
} else if (evt.clientX || evt.clientY) { //IE8 & 9 don't have pageX or pageY
    posx = evt.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    posy = evt.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
var atPos = (posx - $(currEl).offset().left) + " " + (posy - $(currEl).offset().top);
...

您可以使用：
代替

.offset（）

$（“#div_id”）.get（0）.getBoundingClientRect（）.top+滚动_值

上面的

scroll\u value

是

$（“#用滚动条_id#括_div_”）。scrollTop（）

value 其中

包含）\u div\u with_scrollbar\u id

是包含初始

div\u id

并具有滚动条的div的id

如果封闭div是body或html，则使用：

scroll_value=（$（“body”）.scrollTop（）| |$（“html”）.scrollTop（））

---

（两个值，因为Chrome和Firefox对

.scrollTop（）

函数的响应不同）

好吧，我正在尝试绝对定位一个日期选择器，parent（）和offset（）返回相同的值。我只是不想检查IE，我想要一些跨浏览器兼容的方式，但想不出任何。不是

.parent（）

，

.position（）

，它返回基于DOM元素的位置，因此如果它们都在同一个

div

，与该

div

相关。这没有帮助。也许它能工作，但它的结构改变太多了，position（）仍然会返回无效值。@HeavyWave Well。。。这很有效。不知道你还想找什么。我以前也从未遇到过有关偏移量的任何问题。如果父对象不是相对定位的，则position（）和offset（）返回无效值的事实不会改变。@HeavyWave坦率地说，我不知道是什么让你认为这些值“无效”！根据API，它返回的正是它应该返回的内容。请提供一个重新创建问题的代码示例。我从来没有遇到过jQuery

offset

的任何问题。在什么情况下回答了这个问题？在什么情况下回答了这个问题？看起来这个问题的提问者在IE中遇到了意想不到的行为，与处理滚动事件、定位和要求解决方法有关。这是我用来可靠解决IE8和IE9 IE中定位问题的一个变通方法。这能回答什么问题？

#hook {
    width: 200px;
    height: 50px;
    background-color:red;
    position: absolute;
    cursor: move;
}
#hanger {
    width: 200px;
    height: 50px;
    background-color:purple;
    position: absolute;
}

$('document').ready(function(){
    var top = $('#hook').offset().top + $('#hook').height()+20;
    var left = $('#hook').offset().left;

    $('#hanger').css('top', top);
    $('#hanger').css('left', left);

    $('#hook').draggable({
        start: function(){
            $('#hanger').toggle();
        },
        stop: function(){
                var top = $('#hook').offset().top + $('#hook').height()+20;
                var left = $('#hook').offset().left;

                $('#hanger').css('top', top);
                $('#hanger').css('left', left);

                $('#hanger').toggle();
        }
        });
});

...
var view = this;
var currEl = evt.currentTarget.graphic.element; //evt.toElement;
//Determine the coordinates to offset the positioning of the context menu by
var posx = 0;
var posy = 0;
if (evt.pageX || evt.pageY) {
    posx = evt.pageX;
    posy = evt.pageY;
} else if (evt.clientX || evt.clientY) { //IE8 & 9 don't have pageX or pageY
    posx = evt.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    posy = evt.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
var atPos = (posx - $(currEl).offset().left) + " " + (posy - $(currEl).offset().top);
...