In-depth analysis of offset() and position() in Jquery_jquery

Let’s first look at the definitions of these two methods.
offset():
Get the relative offset of the matching element in the current viewport.
The returned object contains two integer properties: top and left. This method only works on visible elements.
position():
Get the offset of the matching element relative to the parent element.
The returned object contains two integer properties: top and left. For accurate calculations, use pixel units for filler, border, and fill properties. This method only works on visible elements.
Is it really that simple? Practice brings true knowledge.
First, let’s take a look at how position() is obtained in the jquery framework source code:

Copy the code The code is as follows:

// Get *real* offsetParent
var offsetParent = this.offsetParent(),
// Get correct offsets
offset = this.offset(),
parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ? { top: 0, left: 0 } : offsetParent.offset();
// Subtract element margins
// note: when an element has margin: auto the offsetLeft and marginLeft
// are the same in Safari causing offset.left to incorrectly be 0
offset.top -= num( this, 'marginTop' );
offset.left -= num( this, 'marginLeft' );
// Add offsetParent borders
parentOffset.top = num( offsetParent, 'borderTopWidth' );
parentOffset.left = num( offsetParent, 'borderLeftWidth' );
// Subtract the two offsets
results = {
top: offset.top - parentOffset.top,
left: offset.left - parentOffset.left
};

Click on the page below to test the difference between the two:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>offset and position test 1</title> <style type="text/css"> body{margin:15px;width:960px;} .parent{ border:3px solid #ccc; width:600px; height:300px; margin-left:55px; padding:25px; } .child{ background:#666; width:200px; height:200px; color:#fff; } .copyright{ position:absolute; right:0; } </style> <div class="parent" style="float:right"> <br> <br> The position of the parent container is the default value, which is static, and the position of the child container is the default value, which is also static. At this time, the offset and position values </div>