jQuery 中position()与offset()的区别
position():获取匹配元素中第一个元素的当前坐标,相对于offset parent的坐标。( 译者注:offset parent指离该元素最近的而且被定位过的祖先元素 )
offset():在匹配的元素集合中,获取的第一个元素的当前坐标,或设置每一个元素的坐标,坐标相对于文档。.offset()
方法允许我们重新设置元素的位置,这个元素的位置是相对于document对象的。如果对象原先的position
样式属性是static
的话,会被改成relative
来实现重定位。
不同之处在于:
.position()
是相对于相对于父级元素的位移。当通过全局操作(特别是通过拖拽操作)将一个新的元素放置到另一个已经存在的元素的上面时,若要取得这个新的元素的位置,那么使用 .offset()
更合适。 .offset()是相对于文档的偏移eg:
<style> .div1{ position: absolute; top: 200px; left: 200px; width: 100px; height: 100px; background: red; } </style> <script src="jquery.min.js"></script> <script> $( document ).ready(function() { alert($(".div2").position().left); }); </script> </head> <body> <div class="div1"> <div class="div2">hahh</div> </div>
position:0,0
offset:200,200
真正的稳定,不是你在一家单位有饭吃,而是你足够牛逼,不论走到哪里都有饭吃