The contrast between the jQuery's offset() and position() techniques concerns the path by which the top and left organizes are figured. The previous dependably alludes to the guardian component's directions, while the last may compute such arranges by considering the balance of the guardian from the entire page when this component is situated. On the off chance that the guardian component is not situated, that is, if its CSS position is static, then both strategies give back the same results. Let' see an illustration.

We have the following Structure:

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

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

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

With the following style:

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

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

It should be obvious that both components are moderately situated. In the event that we attempt to move the test component by taking its balances first and after that adding 50 pixels to these directions, you'll without a doubt notice the distinction:

$('#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);
});

So, we can conclude that the offset() refers to the position relative to the document and position() refers to the position relative to its parent element.