.position()

jQuery

previous page next page

.position()

Categories: CSS | Offset | Manipulation > Style Properties

.position() Returns: Object

Description: Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

  • version added: 1.2.position()

    • This method does not accept any arguments.

The .position() method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with .offset(), which retrieves the current position relative to the document. When positioning a new element near another one and within the same containing DOM element, .position() is the more useful.

Returns an object containing the properties top and left.

Note: jQuery does not support getting the position coordinates of hidden elements or accounting for borders, margins, or padding set on the body element.

Example:

Access the position of the second paragraph:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        div { padding: 15px;}
                                    

                                  

                                  

                                    

                                        p { margin-left:10px; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <div>
                                      
                                    

                                  

                                  

                                    

                                        <p>Hello</p>
                                    

                                  

                                  

                                    

                                      
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <p>
                                        </p>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                      var p = $("p:first");
                                    

                                  

                                  

                                    

                                      var position = p.position();
                                    

                                  

                                  

                                    

                                      $("p:last").text( "left: " + position.left + ", top: " + position.top );
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page