Detailed explanation of jQuery's Position method usage and compatibility

This article mainly shares knowledge about the use and compatibility of the jQuery Position method. The position method obtains the offset of the matching element relative to the parent element. Friends who are interested should take a look, I hope it can help everyone.

1. Position method

jquery api address: http://jquery.cuishifeng.cn/position.html

The position method obtains the offset of the matching element relative to the parent element .

2. Description

2.1 The difference with offset()

.offset() is to obtain the current coordinates of the element relative to the documet

.position( ) method can obtain the offset position of an element relative to its parent element, which is the element's nearest and positioned ancestor element.

2.2 Value calculation

. The size of the border, margins and padding occupied by the element itself is not counted.

. The border and margin of the parent element are not counted, and the padding of the parent element is included.

3. Sample code

      
  
 
 first child 
 
 second child 
 
    

4. Note

For attributes such as line-height of text, the default sizes of browsers (chrome, IE, Firefox) are inconsistent, so they are different The browser position() will be inconsistent when calculating the size, so it is necessary to ensure that all browsers have consistent line-height and other attributes.

The sample code is an example without setting line-height. The value calculated by position() is different in different browsers.

      
  
 文字文字 
 first child 
 
 second child 
 
    

Related recommendations:

CSS positioning and application scenario example analysis

How to use css position

Detailed explanation of CSS position property examples

The above is the detailed content of Detailed explanation of jQuery's Position method usage and compatibility. For more information, please follow other related articles on the PHP Chinese website!