Home > Web Front-end > JS Tutorial > body text

Usage examples of position() method in jQuery_jquery

WBOY
Release: 2016-05-16 16:19:58
Original
1045 people have browsed it

The example in this article describes the usage of the position() method in jQuery. Share it with everyone for your reference. The specific analysis is as follows:

This method gets the offset of the matched element relative to some element.
The returned object contains an object with two integer properties (top and left).
This method only works on visible elements.
Grammar structure:

Copy code The code is as follows:
$(selector).position()

At the beginning of the tutorial, the reason why it is said is to get the offset of the matching element relative to some elements. Many tutorials say that the offset returned by the method is relative to the parent element, but this is not entirely true. This method will process the matching element with absolute positioning. Of course, it does not mean that the matching element is actually set to absolute positioning. The offset reference principle of the method is as follows:

1. If the parent element does not use positioning (the position attribute value is relative, absolute or fixed), then the offset reference object is the window.
2. If any of the parent elements are positioned, then the reference object of the offset is the nearest positioned element.

Example code:

Copy code The code is as follows:






position() function-Script Home













In the top combination in the above code, since the parent element uses relative positioning, the obtained offset is relative to the parent element. In the bottom combination, since the parent element does not use positioning, the offset reference object is the window.

I hope this article will be helpful to everyone’s jQuery programming.

This article is reproduced from: Ant Tribe http://www.softwhy.com/

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!