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

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

IT文库 » 当position=static(默认)时,offset()和position()并不一样
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址