1、position方法
jquery api地址：http://jquery.cuishifeng.cn/position.html
position方法獲取匹配元素相對父元素的偏移。
2、說明
2.1 與offset()區(qū)別
.offset()是獲得該元素相對于documet的當前坐標
.position()方法可以取得元素相對于父元素的偏移位置，父元素為該元素最近的而且被定位過的祖先元素。
2.2 值計算
.元素本身所占用的邊框，邊距和填充的大小不計。
.父元素的邊框和邊距不計，父元素的填充計算在內(nèi)。
3、示例代碼
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>jQuery position()示例</title> <style> html { line-height: 1.15; } /*父元素--相對定位*/ .parent { position: relative; width: 200px; height: 400px; /*父元素的margin不計算在內(nèi)*/ margin-top: 10px; /*父元素的border不計算在內(nèi)*/ border: 1px solid green; /*父元素的padding計算在內(nèi)*/ padding-top: 10px; } .child-1 { width: 100px; height: 100px; margin: 0 auto; border: 1px solid #2E8DED; } .child-2 { width: 100px; height: 100px; /*子元素的margin不計算在內(nèi)*/ margin: 10px auto 0; /*子元素的border不計算在內(nèi)*/ border: 1px solid #2E8DED; /*子元素的padding不計算在內(nèi)*/ padding: 10px; } </style> </head> <body> <div class="parent"> <p class="child-1"> first child </p> <p class="child-2" id="no-2"> second child </p> </div> <script src=".output/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function() { //獲取child-2子元素距離父元素的距離 console.log($('#no-2').position().top); }); </script> </body></html>4、注意
對于文字的line-height等屬性，瀏覽器（chrome、IE、Firefox）默認大小不一致，因此不同的瀏覽器position()在計算尺寸時會存在不一致，因此必須保證所有瀏覽器一致的line-height等屬性。
示例代碼為沒有設置line-height的例子，position()在不同的瀏覽器上計算出的值不一樣。
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>jQuery position()示例</title> <style> html { /*必須給予一致的設置,否則position()計算值不同*/ /*line-height: 1.15;*/ } /*父元素--相對定位*/ .parent { position: relative; width: 200px; height: 400px; /*父元素的margin不計算在內(nèi)*/ margin-top: 10px; /*父元素的border不計算在內(nèi)*/ border: 1px solid green; /*父元素的padding計算在內(nèi)*/ padding-top: 10px; } .child-1 { width: 100px; height: 100px; margin: 0 auto; border: 1px solid #2E8DED; } .child-2 { width: 100px; height: 100px; /*子元素的margin不計算在內(nèi)*/ margin: 10px auto 0; /*子元素的border不計算在內(nèi)*/ border: 1px solid #2E8DED; /*子元素的padding不計算在內(nèi)*/ padding: 10px; } </style> </head> <body> <div class="parent"> 文字文字 <p class="child-1"> first child </p> <p class="child-2" id="no-2"> second child </p> </div> <script src=".output/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function() { //獲取child-2子元素距離父元素的距離 console.log($('#no-2').position().top); }); </script> </body></html>
新聞熱點
疑難解答
圖片精選
