Home > Developer > JavaScript
Example of position () method usage in jQuery, jqueryposition
This example describes the position () method in jQuery. Share it with you for your reference. The specific analysis is as follows:
This method obtains the offset of the matching element to some elements.
The returned object contains two integer attributes (top and left.
This method is only valid for visible elements.
Syntax structure:
Copy codeThe Code is as follows: $ (selector). position ()
At the beginning of the tutorial, the reason is to get the offset of the matching element relative to some elements. In many tutorials, the offset returned by a method is not exactly the same as that returned by the parent element. This method will process the Matching Element in absolute positioning mode. Of course, this does not mean that the matching element is set to absolute positioning. The offset reference principles of the method are as follows:
1. If the parent element is not positioned (the position attribute value is relative, absolute, or fixed), the offset reference object is a window.
2. If the parent element adopts positioning, the reference object of the Offset is the element closest to it.
Instance code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> position () function-helper's house </title>
<Style type = "text/css">
*{
Margin: 0px;
Padding: 0px;
}
. Father {
Background-color: green;
Width: 200px;
Height: 200px;
Padding: 50px;
Margin-bottom: 50px;
Margin-left: 100px;
}
. Children {
Height: 150px;
Width: 150px;
Background-color: red;
Line-height: 150px;
Text-align: center;
}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ (". Children"). each (function (){
Var text;
Text = "left:" + $ (this). position (). left;
Text + = "top:" + $ (this). position (). top;
$ (This). text (text );
})
})
</Script>
</Head>
<Body>
<Div class = "father" style = "position: relative">
<Div class = "children"> </div>
</Div>
<Div class = "father">
<Div class = "children"> </div>
</Div>
</Body>
</Html>
In the above Code, the top combination of the parent element uses relative positioning, so the obtained offset is relative to the parent element. In the combination at the bottom, because the parent element is not positioned, the offset reference object is a window.
I hope this article will help you with jQuery programming.
This article
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
