offset方法和position方法

CSS定位与jQuery位置获取

最新推荐文章于 2025-09-23 15:57:14 发布

原创最新推荐文章于 2025-09-23 15:57:14 发布 · 386 阅读

0 ·

CC 4.0 BY-SA版权

* {
      margin: 0;
      padding: 0;
    }
    
    .father {
      width: 400px;
      height: 400px;
      background-color: pink;
      position: relative;
      margin: 50px;
    }
    
    .son {
      width: 200px;
      height: 200px;
      background-color: red;
      position: absolute;
      top: 100px;
      left: 100px;
    }

<div class="father">
  <div class="son"></div>
</div>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    //获取元素相对于document的位置
    console.log($(".son").offset());//对象{top: 150, left: 150}

    //获取元素相对于有定位的父级元素的位置
    console.log($(".son").position());//对象{top: 100, left: 100}，相对于father的位置

    //获取left值
    console.log($(".son").position().left);
  });
</script>