offset和position

<style type="text/css">
  * {
    margin: 0px;
  }

  .div1 {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 10px;
    background: blue;
  }

  .div2 {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50px;
    background: red;
  }

  .div3 {
    position: absolute;
    top: 250px;
  }
</style>
<body style="height: 2000px;">

<div class="div1">
  <div class="div2">测试offset</div>
</div>

<div class='div3'>
  <button id="btn1">读取offset和position</button>
  <button id="btn2">设置offset</button>
</div>

<!--
获取/设置标签的位置数据
  * offset(): 相对页面左上角的坐标
  * position(): 相对于父元素左上角的坐标
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
  需求:
  1. 点击 btn1
    打印 div1 相对于页面左上角的位置
    打印 div2 相对于页面左上角的位置
    打印 div1 相对于父元素左上角的位置
    打印 div2 相对于父元素左上角的位置
  2. 点击 btn2
    设置 div2 相对于页面的左上角的位置
   */
  $(function () {
    // offset(): 相对页面左上角的坐标
   // console.log($('.div1').offset());  //{top: 20, left: 10}
   // console.log($('.div2').offset());  // {top: 70, left: 10}
    // position(): 相对于父元素左上角的坐标
    //console.log($('.div1').position()); // {top: 20, left: 10}  
    //console.log($('.div2').position()); // {top: 50, left: 0}


 // 2. 点击 btn2 设置 div2 相对于页面的左上角的位置
//  第一种(最好用第一种)
    // $('#btn2').click(function(){
    //   $('.div2').css({
    //     'left':'300px',
    //     'top':'200px'
    //   })
    // })
 
   //  第二种
    $('#btn2').click(function(){
      $('.div2').offset({
        left:300,
        top:200
      })
    })


  })
</script> 
posted @ 2020-08-09 08:58  13522679763-任国强  阅读(131)  评论(0)    收藏  举报