我试图在一些其他元素下定位一个元素,但是我在一个问题中遇到了一个问题,当页面被向下滚动时,offset()返回不同的IE和其他浏览器的值。
IE返回相对于可见区域顶部的位置(即在向下滚动时下降),Firefox和Chrome始终返回相同的值,无论滚动(我认为是更好的行为)。
只是为了澄清:如果没有一个元素的父母相对定位,那么offset()和position())返回不同的IE值,这取决于你向下滚动的距离,但是这并不是在jQuery中提到的文件。为什么?有没有办法,这不需要任何更改的HTML结构(例如,我想重复使用一个datepicker为许多字段,只是重新定位它)。
有没有人遇到同样的问题?
解决方法
查看这个我的
fiddle,通过拖动红色的div来测试。
HTML
<div id="hook"></div> <div id="hanger"></div>
CSS
#hook { width: 200px; height: 50px; background-color:red; position: absolute; cursor: move; } #hanger { width: 200px; height: 50px; background-color:purple; position: absolute; }
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(); } }); });