<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);
});
This Pen doesn't use any external CSS resources.