Let's look at the definitions of these two methods first.
Offset ():
Gets the relative offset of the matching element at the current viewport.
The returned object contains two cosmetic properties: Top and left. This method is valid only for visible elements.
Position ():
Gets the offset of the matching element relative to the parent element.
The returned object contains two cosmetic properties: Top and left. To accurately calculate the results, use pixel units on the filler, border, and fill properties. This method is valid only for visible elements.
Is it really that simple? Practice the truth.
First take a look at the jquery framework source code, how to obtain position ():
Copy Code code 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 two differences:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>offset and position test 1</title> <script type=" Text/javascript "src=" Img.jb51.net/jslib/jquery/jquery-1.3.2.js "></script> <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> <script type= "Text/javascript" > $ (document). Ready (function () {$ ('. Child '). each (function () {VA R Text = "position (). left=" +$ (this)-position (). Left; Text + "<br>position (). top=" +$ (this). Position (). Top; Text = "<br>offset (). left=" +$ (This). Offset (). Left; Text = "<br>offset (). top=" +$ (This). Offset (). Top; Text = "<br> The offset (). top=" of its parent +$ (this). Parents (". Parent"). Offset (). Top; Text = "<br> its parent's offset (). left=" +$ (This). Parents (". Parent"). Offset (), left; $ (this). html (text); }); }); </script> </pead> <body> <div class= "parent" > Parent container position is the default value, which is static, the position of the child container is the default value, and Is static, this time, offset and position values are the same <br><br><br> <div class= "Child" ></div> </div> <div ></div> <br> <div class= "parent" > the position of the parent container is relative positioning, that is, ralative, the position of the child container is the default value, Also static, this time, offset and position values are different <div class= "child" ></div> </div> <br> <div > <div C lass= "Parent" > the position of the parent container is absolutely positioned, that is absolute, the position of the child container is the default and static, and at this time, the offset and position values are different <div class= " Child "></div> </div> </div> <div class=" Copyright ">©playgoogle.com</div> </body > </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The results of the Test1 page test can come to this conclusion:
When using the position () method, the element is actually treated as absolute positioning, obtaining the equivalent of the nearest offset to a parent element with absolute or relative positioning.
When you use the position () method, if all of its parent elements are in default positioning (static), they are handled in the same way as offset (), which is the relative offset of the current window
Using the offset () method, regardless of how the element is positioned, regardless of how its parent element is positioned, is the offset of the element that is obtained relative to the current viewport
Knowing these features, how do we reasonably use position () and offset ()?
In my personal experience, the position of an element (a) is usually obtained in order for another element (B) to appear just near the a element. There are usually 2 kinds of situations:
1. The element b to be displayed is stored at the top or bottom of the DOM (that is, its parent element is body). This is the best time to use offset (). Example Validation:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>offset and position test 1</title> <script type=" Text/javascript "src=" Img.jb51.net/jslib/jquery/jquery-1.3.2.js "></script> <style type=" Text/css "> body{margin:15px; width:960px;} . parent{border:3px Solid #ccc; width:600px; height:300px; margin-left:55px; padding:25px; } input{height:25px; Float:right; }. copyright{Position:absolute; right:0; }. tip{border:3px dotted #669900; Background: #eee; width:200px; height:40px; Position:absolute; Display:none; } </style> <script type= "Text/javascript" > $ (document). Ready (function () {$ ("input"). Bind ("click", Function () {$ (. tip). css {left:$ (this). Offset (). left+ ' px ', top:$ (this). Offset (). top+25+ "PX "}); $ (". Tip"). Toggle (); }); }); </script> </pead> <body> offset, in which element B is at the bottom of the DOM, that is, its parent container is the body <div class= "parent" > parent element is absolutely positioned <input type= "button" value= "Click me, just show element B below me, and left and I align" > </div> <br><br><br><br ><br><br><br><br> <div class= "Tip" > I am element b<br> now using offset </div> </b Ody> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Examples of position that cannot be displayed properly
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>offset and position test 1</title> <script type=" Text/javascript "src=" Img.jb51.net/jslib/jquery/jquery-1.3.2.js "></script> <style type=" Text/css "> body{margin:15px; width:960px;} . parent{border:3px Solid #ccc; width:600px; height:300px; margin-left:55px; padding:25px; } input{height:25px; Float:right; }. copyright{Position:absolute; right:0; }. tip{border:3px dotted #669900; Background: #eee; width:200px; Position:absolute; Display:none; } </style> <script type= "Text/javascript" > $ (document). Ready (function () {$ ("input"). Bind ("click", Function () {$ (. tip). css ({left:$ (this). Position (). left+ "px", top:$ (this). Position (). top+25+ "px"});$ (". Tip"). Toggle (); }); }); </script> </pead> <body> With the example of position, in which element B is at the bottom of the DOM, that is, its parent container is the body <div class= "parent" > Parent Vegetarian is absolutely positioned <input type= "button" value= "Click me, just show element B below me, and left and I align" > </div> <br><br><br> <br><br><br><br><br> <div class= "Tip" > I'm element b<br> now I'm using position<br>. You'll find I'm not in the right position </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
In the above two examples, element b is stored at the bottom of the DOM structure, because its parent element is the body, so regardless of how element a is positioned, the problem can be solved by simply looking for a equivalent to the entire window offset.
2. The use of position () is most appropriate when the element B to be displayed is stored under the same parent element of element A (that is, the sibling node of B a).
Examples of normal display with offset
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>offset and position test 1</title> <script type=" Text/javascript "src=" Img.jb51.net/jslib/jquery/jquery-1.3.2.js "></script> <style type=" Text/css "> body{margin:15px; width:960px;} . parent{border:3px Solid #ccc; width:600px; height:300px; margin-left:55px; padding:25px; } input{height:25px; Float:right; }. copyright{Position:absolute; right:0; }. tip{border:3px dotted #669900; Background: #eee; width:200px; Position:absolute; Display:none; } </style> <script type= "Text/javascript" > $ (document). Ready (function () {$ ("input"). Bind ("click", Function () {$ (. tip). css ({left:$ (this). Position (). left+ "px", top:$ (this). Position (). top+25+ "px"});$ (". Tip"). Toggle (); }); }); </script> </pead> <body> with position, in this case, Element B is near the button button, that is, the element B and button buttons have a common parent container <div class= " Parent "> is absolutely positioned <input type=" button "value=" Click me, just show element B below me, and left and I align > <div class= "Tip" > I'm element b<b R> is now using position, I am the same as the father of the button <br> I can display the normal </div> </div> <br><br><br><br& as required. Gt;<br><br><br><br> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Examples of normal display using the offset five method
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>offset and position test 1</title> <script type=" Text/javascript "src=" Img.jb51.net/jslib/jquery/jquery-1.3.2.js "></script> <style type=" Text/css "> body{margin:15px; width:960px;} . parent{border:3px Solid #ccc; width:600px; height:300px; margin-left:55px; padding:25px; } input{height:25px; Float:right; }. copyright{Position:absolute; right:0; }. tip{border:3px dotted #669900; Background: #eee; width:200px; Position:absolute; Display:none; } </style> <script type= "Text/javascript" > $ (document). Ready (function () {$ ("input"). Bind ("click", Function () {$ (. tip). css {left:$ (this). Offset (). left+ ' px ', top:$ (this). Offset (). top+25+ "px"}); $(".Tip "). Toggle (); }); }); </script> </pead> <body> offset, in which element B is located near the button button, that is, the element B and button buttons have a common parent container <div class= "Parent "> Parent element is absolutely positioned <input type=" button "value=" Click me, just show element B below me, and left and I align > <div class= "Tip" > I'm element b<br> Now with offset, I'm the same as the father of the button I can't show my normal </div> </div> <br><br><br><br><br>< as required. ;br><br><br> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
To sum up, you should use position () or offset () depending on the location of the element B dom that you are controlling.
