How do I find the absolute position of an element using jQuery?

Scroll adjustment and fixed positioning

In today's wild world of Web, dealing with scrolling is a common task. For elements with fixed positioning, you might need to consider the scroll offset:

var scrollPosY = $(window).scrollTop(); // How far did we scroll down?
var scrollPosX = $(window).scrollLeft(); // And horizontally?


Combine these with your element's fixed position, and you'll never lose your way in the viewport jungle again!

Working with visibility in mind

Dealing with invisible elements can be like playing hide and seek. But jQuery has got you covered. Elements that are not visible may return 0 or incorrect values for .offset(). Never fear:

if ($('#yourElement').is(':visible')) {
  // The coast is clear, proceed with .offset()
} else {
  // Got ya! Use .css('top') and .css('left') instead
}


Ensuring consistent results via CSS

For dependable results with .offset(), stick to position: absolute in your CSS:

#yourElement {
  position: absolute; // Not all who wander are lost, but we're staying right here!
}


Position vs offset: Understanding the difference

While the .offset() method gives you a position relative to the document, its sister function .position() serves up coordinates based on the offset parent:

var parentPos = $('#yourElement').position();


With .position(), it's all about the relative positioning inside the element family.

Staying on top of dynamic situations

In the dynamic environment of web pages, where content and animations are constantly changing, element positions can change over time. Sync up your .offset() calls with event handlers so you're always upto-date:

$(window).on('resize scroll', function() {
  // Keep up, the Web waits for no one!
});
