JQuery Position method and compatibility

jQuery API Address: http://jQuery.cuishifeng.cn/position.html

Position method Gets matching elements relative to parent elements Offset.

2, explanation

2.1 and OFFSET () distinguishes

.offset () is obtained to obtain this element relative to documet Current coordinate

.position () method can acquire an offset position of the element relative to the parent element, the parent element is the nearest, and the ancestors that are positioned.

2.2 Value Calculation

. The size of the element itself is occupied by the size of the border, the margin, and the filler. . The border and margins of the parent elements are not counted, and the fill of the parent element is calculated.

3, sample code

jQuery position () Example
 html {line-height: 1.15;} / * parent element - relative positioning * / .parent {position: relative; width: 200px; height: 400px; / * MARGIN of the parent element is not calculated * / Margin-top: 10px; / * Border does not calculate the parent element * / border: 1px solid Green/ * Padding calculation of the parent element * / padding-top: 10px;} .child-1 {width: 100px; height: 100px; margin: 0 auto; border: 1px solid # 2e8ded;} .child-2 {Width : 100px; Height: 100px; / * child element margin does not calculate * / margin: 10px auto 0; / * child element Border does not calculate * / border: 1px solid # 2e8ded; / * child elements Padding No calculated * / Padding: 10px;}   First Child   Second Child      $ (document) .ready (function () {// Gets the minimum of the Child-2 sub-elements. Console.log ($ ('# NO-2'). Position (). TOP);};   

4, pay attention to

LINE-H for textEIGHT and other properties, browser (Chrome, IE, Firefox) The default size is inconsistent, so different browser Position () will have inconsistency when calculating the size, so it must ensure that all browser is consistent with Line-HEIGHT and other properties.
The sample code is not set line-height , and the position () calculated on different browsers is different.
jQuery position () example
HTML {/ * must be given a consistent setting Otherwise, position () calculates the value of * / / * line-height: 1.15; * /} / * parent element – relative positioning * / .parent {position: relative; width: 200px; height: 400px; / * parent element Margin does not calculate * / margin-top: 10px; / * parent element Border does not calculate * / border: 1px solid green; / * Parent element Padding calculation is * / padding-top: 10px;} .child-1 {Width: 100PX; Height: 100px; Margin: 0 auto; border: 1px solid # 2e8ded;} .child-2 {Width: 100px; Height: 100px; / * Margin of child elements does not calculate * / margin: 10px auto 0; / * Border of child elements No calculated * / border: 1px solid # 2e8ded; / * child element Padding: 10px;}

Text First Child

Second Child

$ (document) .ready (function () {// Gets the miniLD-2 child elements to the distance console.log ($ (‘# NO-2’). Position (). TOP);}
     Summary    The above is the jQuery introduced to you. Position method uses and compatibility, I hope to help everyone, if you have any questions, please leave a message, the small package will reply to everyone. Thank you very much for your support of Tumi Cloud Website!                      
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment