<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://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js