In jquery, there are two ways to get the position of an element offset () and position (), what are the similarities and differences between the two methods? What problems should be paid attention to when using? When do I use offset () and when do I use position ()?
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.
The difference is:
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 ()?
Position () Gets the distance relative to its nearest parent element with relative position (position:relative or Position:absolute), and returns the distance relative to the browser if no such element is found.
Offset () always returns the distance relative to the browser document, ignoring the outer element.
Here's a simple example where the outer div element (position:relative) is only one:
<div id= "outer" style= "width:200px;position:relative;left:100px;" >
<div id= "inner" style= "position:absolute;left:50px;top:60px;" >
</div>
</div>
Gets the position relative to the nearest parent (position:relative or Position:absolute)
var vposition = $ ("#inner"). Position ();
alert (vposition.left); Output: 50
alert (vposition.top); Output: 60
var Voffset = $ ("#inner"). Offset ();
alert (voffset.left); Output: $ ("#outer"). Offset (). left+50
alert (voffset.top); Output: $ ("#outer"). Offset (). top+60
In different browsers, offset () is different from the position of the browser, I believe you read the corresponding comments above, have mastered the position () and the offset () method difference.
The element b to display 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 ().
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>offset and position Test 1</title>
<script type= "Text/javascript" src= "/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>
<body>
With offset, in this example, Element B is at the bottom of the DOM, that is, its parent container is body
<div class= "Parent" style= "position:absolute;left:150px" >
The parent element is absolutely positioned
<input type= "button" value= "Click me, just show element B below me, and align to left and me" >
</div>
<br><br><br><br><br><br><br><br>
<div class= "Tip" >
I am the element b<br>
Now we're using offset.
</div>
</body>
To display the element b stored under the same parent element of element A (that is, the sibling node of B a), it is most appropriate to use position () at this time.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>offset and position Test 1</title>
<script type= "Text/javascript" src= "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>
<body>
With position, in this case the element B is near the button button, that is, the element B and button buttons have a common parent container
<div class= "Parent" style= "position:absolute;left:150px" >
The parent element is absolutely positioned
<input type= "button" value= "Click me, just show element B below me, and align to left and me" >
<div class= "Tip" >
I am the element b<br>
Now it's position,
I have the same father element as the button <br>
I can display it as expected.
</div>
</div>
<br><br><br><br><br><br><br><br>
</body>
You can look at the diagram below:
We can generally see the difference between the two in the diagram. Position () Gets the distance relative to its nearest parent element with relative position (position:relative), and returns the distance relative to the browser if no such element is found.
, where the outer div element (position:relative) is only one:
<div id= "outer style=" Width:200px;position: relative;left:100px; "
<div id= "inner" style= "position:absolute;left:50px;top:60px;" >
</div>
</ div>//gets the location relative to the nearest parent (position:relative)
var vposition = $ ("#inner"). Position ();
Alert (vposition.left); /output:
Alert (vposition.top); //output: $
var Voffset = $ ("#inner"). offset ();
Alert (Voffset.left); //output: $ ("#outer"). Offset (). LEFT+50
Alert (voffset.top); // Output: $ ("#outer"). Offset (). top+60
in different browsers, offset () gets a different position than the browser, and I'm sure you read the corresponding annotation above, and you have mastered position () with offset () The difference between the methods.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
