<div id="outer">
        <div id="inner">내용</div>
    </div>

<ul>
  <li>$("#inner").offset().left : 130</li>
  <li>$("#inner").offset().top : 100</li>
  <li>$("#inner").position().left : 80</li>
  <li>$("#inner").position().top : 50</li>
</ul>
* {
  margin: 0;
  padding: 0;
}

#outer {
  width: 500px;
  height: 500px;
  margin: 50px;
  position: relative;
  background: #ff6600;
}

#inner {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 80px;
  top: 50px;
  background: #ccc;
}
$(document).ready(function () {
  console.log($("#inner").offset().left);
  console.log($("#inner").offset().top);
  console.log($("#inner").position().left);
  console.log($("#inner").position().top);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js