JQuery：为什么元素的相对位置有时会返回窗口顶部（0,0）而在其他位置正确返回？
我试图在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：我选择了本文中指出的本地非阻塞方式： 在jquery中“忙碌等待”动画的最佳方式是“位置可配置”？ （即，显示行动的位置）
更新:(选择答案后）：Tom回答DOMElement的父级是正确的。 但是为了使其正常工作，最好使用.position()而不是上面的.offset() （如rkw所建议的那样）。 上面的代码附加到body（某些元素不正确）但使用offset。
position：relative的结果取决于父级的位置。 如果您将此行为应用于不同的项目集合，则可能是他们的定位上下文与您所看到的行为完全不同的情况。
您看到的问题是否可重现？ 对于相同的元素，它总是一样的吗？
编辑：这是您需要将新的加载指示符附加到页面的代码，在文档中您之前获得的位置信息有意义的位置。
// $('body').append(this.el); $(DOMElement).parent().append(this.el);
绝对定位的项目在第一个RELATIVELY POSITIONED父元素处找到它的原点。 如果没有定义，它将从树上升到BODY标记。
您需要定义position:relative的唯一时间position:relative是您希望将该元素定义为其CHILD元素的新原点时。
为了标准化所有浏览器，我建议通过jQuery提供的方法：
.offset() ：如果您想要相对于页面的位置，请使用此选项
.position() ：如果您想要相对于父元素的位置，请使用此选项。 请注意，要使此元素生效，您的父元素必须具有position: relative或position: absolute属性。