<div id="outer">
  <div id="inner">내용</div>
</div>
* {
  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