Retrieve the position (X,Y) of an HTML element

javascript

get-bounding-client-rect

offset-parent

scrollable-areas

byNikita Barsukov·Mar 5, 2025

Easily retrieve an element's coordinates by applying the getBoundingClientRect() method, which provides a DOMRect containing the element's position. Simple, swift, and no fuss!

const element = document.querySelector('selector');
const { left, top } = element.getBoundingClientRect(); // Nothing but net!
console.log(`X: ${left}, Y: ${top}`);

For pinpoint positioning within the entire document rather than just the viewport, add scroll offsets:

const posX = left + window.scrollX; // When you scroll, but you don't lose your spot
const posY = top + window.scrollY;
console.log(`Absolute X: ${posX}, Absolute Y: ${posY}`);

The semantics of positioning

Element positioning is a core principle of layout composition. It's like a well-directed movie, every actor (element) knows exactly where to stay for the perfect scene.

Calculating total offset: Know your offsetParent!

Unearth the full offset of an HTML element using traditional offsetTop and offsetLeft.

function getOffset(element) {
  let offsetX = 0;
  let offsetY = 0;
  while(element) {
    offsetX += element.offsetLeft; // Cumulative additions are a programmer's best friend
    offsetY += element.offsetTop;
    element = element.offsetParent; // Keep climbing the DOM tree!
  }
  return { left: offsetX, top: offsetY };
}

Scrollable areas: Scroll but don't forget!

The craft of retrieving an element's dimension within a scrollable container has a hero in the form of scrollTop and scrollLeft.

function getAdjustedOffset(element) {
  let offsetX = 0;
  let offsetY = 0;
  // Prepare for a dose of relentless iterations
  do {
    offsetX += element.offsetLeft - element.scrollLeft + element.clientLeft; // The Math.max() of web positioning
    offsetY += element.offsetTop - element.scrollTop + element.clientTop; 
    element = element.offsetParent;
  } while(element);
  return { left: offsetX, top: offsetY };
}

Cross-browser compatibility: Embrace and conquer quirks

Web developers are the champions of compatibility. Do remember to account for clientLeft and clientTop in various browser-specific scenarios.

The specter of CSS transforms

A quick heads up: CSS transforms affect how getBoundingClientRect() behaves. It smartly includes these transformations for a precise visual representation of the element's on-screen location.

Operating in different layouts

Do note that varying layout models (like flexbox or grid layouts) may have unique impacts on positioning values. Also, z-index values govern stacking contexts, providing threaded control over how overlapping elements interact.

Performance: No one likes a slow page

Stalking performance: getBoundingClientRect() and walking through the offsetParent can cause layout reflows if used excessively. Minimising unnecessary DOM interactions is not only classy, but it's also performant!

explain-codes / Javascript / Retrieve the position (X,Y) of an HTML element

Linked

Get the position of a div/span tag



How to scroll to specific item using jQuery?



Javascript to scroll long page to DIV



How do I retrieve an HTML element's actual width and height?



How to get an element's top position relative to the browser's viewport?

