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

最新推荐文章于 2024-07-07 17:22:42 发布

qq_25381351

最新推荐文章于 2024-07-07 17:22:42 发布

阅读量358

点赞数

文章标签： offset和position

本文链接：https://blog.csdn.net/qq_25381351/article/details/60476646

版权

百度查了很多资料（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>