jquery Jquery.offset (). Top/left is used to get the div distance from the window, Jquery.position (). Top/left is used to get the distance from the parent div (must be an absolutely positioned div).
(1) First introduce Jquery.offset (). Top/left
Css:
Copy Code code as follows:
*{margin:0px; padding:0px;}
div{margin:0px Auto;
. a{width:960px; height:200px;}
. parentbox{padding:30px; margin-top:40px; width:960px; height:300px;}
. innerbox{padding:20px; margin-top:10px; width:400px; height:100px;}
Html:
Copy Code code as follows:
<body>
<div class= "a" > a<div>
<div class= "Parentbox" >
<div class= "Innerbox" >innerBox</div>
</div>
</body>
Js:
Copy Code code as follows:
$ (function () {
Var_offsettop = $ (". Innerbox"). Offset (). Top; 280px
})
Here the 280px= a.height/200px + parentbox.padding-top/30px + parentbox.margin-top/40px + innerbox.margin-top/10px;
If this side parentbox set position:relative; Innerbox set position:absolute; and Innerbox set top:40px;
At this time the value of the _offsettop is 290px = a.height/200px + parentbox.margin-top/40px + innerbox.margin-top/10px + inebox.top/40px;
Because the absolute definition is the reference coordinate with the inner border of the upper-left corner of the parent div.
If Innerbox has a border set, add a border value
(2) Jqury.position (). Top/left is used to get the child div distance from the parent Div, and the child div must be absolutely positioned
Css:
Copy Code code as follows:
*{margin:0px; padding:0px;}
div{margin:0px Auto;
. a{width:960px; height:200px;}
. parentbox{padding:30px; margin-top:40px; width:960px; height:300px; position:relative;
. innerbox{padding:20px; margin-top:10px; width:400px; height:100px; position:absolute;
Html:
Copy Code code as follows:
<body>
<div class= "a" > a<div>
<div class= "Parentbox" >
<div class= "Innerbox" >innerBox</div>
</div>
</body>
Js:
Copy Code code as follows:
$ (function () {
Var_offsettop = $ (". Innerbox"). Offset (). Top; 280px
})
