HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>offset vs position</title>

  <style>

    body { font-family: sans-serif; padding: 16px; }

    #wrap {

      position: relative;

      margin: 40px;

      padding: 24px;

      border: 2px dashed #94a3b8;

      background: #f8fafc;

    }

    #box {

      width: 80px; height: 50px;

      background: #7c3aed;

      color: #fff;

      display: flex; align-items: center; justify-content: center;

    }

    #out { margin-top: 12px; font-family: monospace; line-height: 1.8; }

  </style>

</head>

<body>

  <div id="wrap">

    <div id="box">Box</div>

  </div>

  <div id="out"></div>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script>

    var $box = $("#box");

    var off = $box.offset();

    var pos = $box.position();

    $("#out").html(

      ".offset()   → left: " + off.left + ", top: " + off.top + " (document)<br>" +

      ".position() → left: " + pos.left + ", top: " + pos.top + " (offset parent)"

    );

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .offset() vs .position() (Try It)