Get an HTML Element’s X and Y Position in JavaScript

You will learn how to measure an element’s position with JavaScript, choose between viewport-relative and document-relative coordinates, and avoid common issues caused by scrolling, timing, and CSS layout changes.

An element can have different X and Y positions depending on the coordinate system you mean.

The most useful browser API is element.getBoundingClientRect(). It returns a DOMRect object describing the element’s visible box relative to the viewport: the currently visible browser area.

const box = document.querySelector(".card").getBoundingClientRect();

console.log(box.left); // X coordinate in the viewport
console.log(box.top);  // Y coordinate in the viewport

If the page scrolls, viewport coordinates change because the element moves closer to or farther from the visible area. To calculate a position relative to the complete document, add the page’s scroll position.

const x = box.left + window.scrollX;
const y = box.top + window.scrollY;

This matters for tasks such as positioning menus, tooltips, drag-and-drop targets, scroll-based animations, click effects, and measuring layout.

Think of a webpage as a long poster and the browser viewport as a small window placed over that poster.

• Viewport coordinates tell you where an element appears inside the window right now.
• Document coordinates tell you where the element is printed on the full poster.

When you scroll, the window moves over the poster. The element stays in the same document location, but its location inside the window changes.

Use getBoundingClientRect() on a DOM element.

const image = document.querySelector("#profile-image");
const rect = image.getBoundingClientRect();

console.log("Viewport X:", rect.left);
console.log("Viewport Y:", rect.top);
console.log("Width:", rect.width);
console.log("Height:", rect.height);

For document-relative coordinates:

const panel = document.querySelector(".panel");
const rect = panel.getBoundingClientRect();

const x = rect.left + window.scrollX;
const y = rect.top + window.;

.(, x);
.(, y);

Consider this page structure:

<div style="height: 500px;"></div>
<div id="notice">Important notice</div>

const notice = document.querySelector("#notice");
const rect = notice.getBoundingClientRect();

const viewportX = rect.left;
const viewportY = rect.top;

const documentX = rect.left + window.scrollX;
const documentY = rect.top + window.scrollY;

console.log({ viewportX, viewportY, documentX, documentY });

Step by step:

1. querySelector("#notice") finds the div element.
2. getBoundingClientRect() measures its current rendered rectangle.

• Tooltips and popovers: Place a help panel beside the button that opened it.
• Context menus: Position a custom menu near a target element.
• Drag and drop: Compare an item’s rectangle with a drop zone’s rectangle.
• Click indicators: Draw a highlight or ripple at a measured location.
• Scroll effects: Determine whether a section is currently above, inside, or below the viewport.
• Canvas overlays: Convert an element’s page location into coordinates used for an overlay.
• Automated UI testing: Verify that an element is visible or appears in an expected area.

In production code, developers usually measure elements only when necessary: after rendering, after a resize, after a relevant scroll event, or immediately before positioning another UI component.

A common popover-positioning pattern is:

function positionPopover(anchor, popover) {
  const rect = anchor.getBoundingClientRect();

  popover.style.position = "fixed";
  popover.style.left = `${rect.left}px`;
  popover.style.top = `${rect.bottom + 8}px`;
}

position: fixed works naturally with viewport coordinates because both are relative to the viewport.

For an absolutely positioned overlay inside the document, use document coordinates instead:

function positionDocumentOverlay(anchor, overlay) {
  const rect = anchor.getBoundingClientRect();

  overlay.style.position = "absolute";
  overlay.style.left = `${rect.left + .scrollX}px`;
  overlay.. = ;
}

Treating viewport coordinates as document coordinates

This code is valid, but its values change when the user scrolls:

const rect = element.getBoundingClientRect();
console.log(rect.top);

If you need a stable position on the full page, add window.scrollY and window.scrollX.

const documentY = rect.top + window.scrollY;

Reading style.left and style.top

console.log(element.style.left); // Often an empty string

element.style.left only reads an inline style="left: ..." value. It does not reliably report where an element was rendered by normal layout, flexbox, grid, margins, or stylesheets. Use getBoundingClientRect() for rendered coordinates.

const element = document.querySelector("#target");
const rect = element.getBoundingClientRect();

// Relative to the visible browser viewport
const viewportX = rect.left;
const viewportY = rect.top;

// Relative to the full document
const documentX = rect.left + window.scrollX;
const documentY = rect.top + window.scrollY;

• left and top are the element’s upper-left corner.
• right and bottom describe the opposite edges.
• Viewport coordinates change after scrolling.
• Document coordinates normally stay stable while scrolling.
• Remeasure after layout changes or resize events.
• Match coordinate systems: use viewport coordinates with position: fixed; use document coordinates with many document-level absolute overlays.
• Check that querySelector found an element before measuring it.

How do I get the X and Y position of a div in JavaScript?

Select the div and call getBoundingClientRect(). Use rect.left for X and rect.top for Y relative to the viewport.

Does getBoundingClientRect() work for images?

Yes. It works for rendered elements including img, div, buttons, inputs, and SVG elements.

Why does rect.top change when I scroll?

It is measured relative to the viewport. Scrolling moves the visible viewport over the document, so the element’s viewport location changes.

How do I get an element’s position relative to the document?

Add the current scroll offsets: rect.left + window.scrollX and rect.top + window.scrollY.

What is the difference between offsetTop and getBoundingClientRect().top?

offsetTop is relative to an offsetParent. getBoundingClientRect().top is relative to the viewport and represents the rendered box’s current position.

• DOM selection with querySelector — You must obtain an element reference before measuring it.
• CSS positioning — static, relative, absolute, and fixed affect how elements are laid out and positioned.
• Browser viewport and scrolling — Explains why viewport and document coordinates differ.
• CSS box model — Helps interpret an element’s rendered dimensions and edges.
• Mouse events — Mouse event coordinates also use different coordinate systems, such as clientX and pageX.
• ResizeObserver — Lets code react when an element’s dimensions change.
• IntersectionObserver — Helps detect whether an element enters or leaves the viewport.