Find the Position of an Element using jQuery

One of my colleagues recently asked me the right way to find the position of an element on the page using jQuery. In my opinion the right way to this in jQuery is to use position() which fetches the top and left position of an element relative to its offset parent. Here’s an example of how to find the position of the Lower Div :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Find the position of an element in jQuery</title>
<
script type='text/javascript'
src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'></script>
<
script type='text/javascript'>
$(function() {
$("#para").append("Top: " + $('#Lower').position().top + "<br/>")
.append("Left: " + $('#Lower').position().left);
});
</script>

<
style type="text/css">
div
{
border:solid 1px Silver;
background-color:Gray;
}
</style>
</
head>
<
body>
<
div id="Upper">
upper upper upper upper upper upper upper upper upper upper upper upper
upper upper upper upper upper upper upper upper upper upper upper upper
upper upper upper upper upper upper upper upper upper upper upper upper
upper upper upper upper upper upper upper upper upper upper upper upper
upper upper upper upper upper upper upper upper upper upper upper upper
upper upper upper upper upper upper upper upper upper upper upper upper
upper upper upper upper upper upper upper upper upper upper upper upper
upper upper upper upper upper upper upper upper upper upper upper upper
</div>
<
br />
<
div id="Lower">
lower lower lower lower lower lower lower lower lower lower lower lower
lower lower lower lower lower lower lower lower lower lower lower lower
lower lower lower lower lower lower lower lower lower lower lower lower
lower lower lower lower lower lower lower lower lower lower lower lower
lower lower lower lower lower lower lower lower lower lower lower lower
lower lower lower lower lower lower lower lower lower lower lower lower
</div>

<
p id="para" />
</
body>
</
html>



OUTPUT


image



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

6 comments:

Anonymous said...

This is a pointless example. You can check the jQ documentation for this.

eduardodx said...

I don't think this is a pointless. It was usefull for me and I'm thankfull.
=D
P.S.: This is not pointless because it came first in Google search.

Anonymous said...

Seriously, why do you have to be a d****e.

Aaron P said...

I'm not saying the first guy isn't being a douche - but I don't think claiming something as coming from a Google search gives anything any sort of merit.

Just sayin'

Anonymous said...

Whether this is pointless or not it is not 100% accurate.

I'm busy updating an old web application with a few iFrames in it and trying to find the absolute position of an element inside an iFrame is a huge headache!

.offset() & .position() only return the top and left co-ordinates within the iFrame and not the screen it is being displayed in, therefore it is not the absolute position!

Anonymous said...

Would it not be better to "cache" the position instead of getting it twice:

$(function() {
var p = $('#Lower').position();
$("#para").append("Top: " + p.top + "
").append("Left: " + p.left);
});

If you want to see positioning of an element in action take a look at this fiddle: http://jsfiddle.net/SF8LN/19