jQuery: the offset() and position() methods

by juErik

HTML

<p>
<button id="offset">offset()</button>
<button id="position">position()</button>
</p>

<div id="wrapper">
    <div id="test"></div>
</div>

<p id="output"></p>

CSS

#wrapper {
    padding: 1em;
    background: gray;
    position: relative;
}

#test {
    width: 5em;
    height: 5em;
    background: silver;
}

JavaScript

$('#offset').click(function() {
    var test = $('#test');
    var top = test.offset().top;
    var left = test.offset().left;
    $('#output').text('top: ' + top + ', left: ' + left);
});

$('#position').click(function() {
    var test = $('#test');
    var top = test.position().top;
    var left = test.position().left;
    $('#output').text('top: ' + top + ', left: ' + left);
});