为什么元素的相对定位有时会返回窗口(0,0)的顶部，而在其他地方会正确返回

JQuery: Why does relative positioning of element return top of window (0,0) at times and correctly at others?

本文关键字：返回 顶部 其他 方会正 定位 相对 元素 窗口 为什么      更新时间：2023-09-26

我试图在ajax调用点显示一个繁忙的等待图标(即，触发事件的event.target或对象)。我使用以下代码来实现这一点，但在某些情况下，返回元素的位置(偏移量)是top:0和left:0 -我知道我可能犯了一个错误，但似乎无法确定它。下面是我的代码(它在一个骨干视图类中，但这并不重要，因为它很琐碎):

//ajax loading animation
var LoadingAnimation = Backbone.View.extend({
    tagName: 'div', //creates an empty div element
initialize: function() {
    var DOMElement = this.options.DOMElement; //is passed as a param (see below)
    var pos = DOMElement.offset();  //<-- pos.left and pos.top 0 for some elements??
    var _width = DOMElement.outerWidth(true);
    var _height = DOMElement.outerHeight(true);
            //setting the 'style' of 'this' div     
    $(this.el).css({
        "position":"absolute", 
        "left" : pos.left+"px",
        "top"  : pos.top+"px",
        "z-index" : 9999,
        "width" : _width+"px",
        "height": _height+"px",
        "background": "#FFFFFF url(images/loading_round.gif) no-repeat center center"
        });
            /*appending to body. Don't know if this is correct, but nothing would 
             *show if it was not done :(
             */
    $('body').append(this.el);
    //_.bindAll(this, 'render','unrender'); //ignore for now
    this.render();
},
render: function() {
    $(this.el).show();
},
unrender: function() {
    $(this.el).fadeOut("slow");
    $(this.el).remove();
}
});

下面是如何调用它的:

$('.ajaxAble').click(function(event){
var showBusy = new LoadingAnimation({DOMElement:$(this)}); //create and render busy waiting
//do ajax calls here and call showBusy.unrender() in success/error
}

这对某些元素有效，但对某些元素offset()返回0。我不知道为什么?所有这些元素都具有相对定位，而要显示的div具有绝对定位。但我看不出有什么冲突。(有吗?)我需要使这个类尽可能地与位置无关，也就是说……

PS:我选择了这篇文章中指出的本地非阻塞方式:拥有'忙碌等待'动画be 'position configurable'在jquery吗?(即，显示动作的位置)

UPDATE:(选择答案后):Tom的追加到DOMElement父元素的答案是正确的。然而，为了正常工作，最好使用.position()而不是上面的.offset()(如rkw所建议的)。上面的代码附加到body(对于某些元素不正确)，但使用offset。

position:relative的结果将取决于父元素的位置。如果您将此行为应用于不同的项目集合，则可能是它们的定位上下文足够不同，从而导致您所看到的行为。

你看到的问题是可重复的吗?对于相同的元素，它总是相同的吗?

编辑:这是您需要将新的加载指示器附加到页面的代码，在文档中的位置信息中，您之前得到的位置信息将有意义。

// $('body').append(this.el);
$(DOMElement).parent().append(this.el);

绝对定位的项在第一个相对定位的父元素中找到它的起源。如果没有定义，它将在树中向上移动到BODY标签。

只有当您希望将该元素定义为其CHILD元素的新原点时，才需要定义position:relative。

为了针对所有浏览器进行标准化，我建议使用jQuery提供的方法:

.offset():如果你想要的位置相对于页面

.position():如果你想要相对于父元素的位置，使用这个。请注意，要使它工作，父元素必须具有position: relative或position: absolute属性。

相关文章：