当position=static(默认)时，offset()和position()并不一样

来源：互联网发布：哪家券商服务好知乎编辑：程序博客网时间：2024/06/05 13:54

百度查了很多资料（google英文看不懂），说当position=static(默认)时，offset()和position()时一样的，但是今天做瀑布流的时候发现他们是不一样的

经过实验得出：

position()的位置计算不包含外边距margin 包含父类的内边距padding

offset() 的位置计算包含外边距margin 包含父类的内边距padding

实验效果图：

实验代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><meta charset="utf-8"><script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>  <style>       *{          margin:0px;          padding:0px;      }      body{          border: solid 2px black;       }            .red{              margin-left: 30px;              padding-left: 10px;              border: solid 2px red;       }      .blue{              margin-left: 20px;              border: solid 2px blue;       }      .relative{              position: relative;      }  </style> </head><body>     <div class="red">      <div id="id1" class="blue">Hello</div>    </div>    <div>position：static</div>     <div id="p1">2nd Paragraph</div>   <div id="p2">2nd Paragraph</div>     <div class="red relative">      <div id="id2" class="blue">Hello</div>    </div>    <div>position：relative</div>   <div id="p3">2nd Paragraph</div>   <div id="p4">2nd Paragraph</div>     <br />    黑框margin-left:0px  padding:0px    <br />    红框margin-left:30px  padding:10px    <br />    篮框margin-left:20px  padding:0px  <br />  position()的位置计算不包括本身的外边距margin 包括父类的内边距padding  <br />  offset()  的位置计算     包括所有的外边距margin 包括父类的内边距padding  <script>    var div= $("#id1");    var offset = div.offset(); //文档窗口的相对定位（绝对定位）    $("#p1").html( "offset: left:" + offset.left);    var positio = div.position(); //与父类元素的相对定位    $("#p2").html( "position: left:" + positio.left);        var div= $("#id2");    var offset = div.offset(); //文档窗口的相对定位（绝对定位）    $("#p3").html( "offset: left:" + offset.left);    var positio = div.position(); //与父类元素的相对定位    $("#p4").html( "position: left:" + positio.left);</script> </body> </html>

0 0