How to Get the X and Y Position of an HTML Element in JavaScript

By the end of this page, you will understand how to read an HTML element’s position in JavaScript, when to use getBoundingClientRect(), how scrolling affects coordinates, and how this differs from properties like offsetTop and offsetLeft.

In JavaScript, an element’s position can mean different things depending on the coordinate system you use.

The most common question is: Where is this element located on the screen or page?

There are two important coordinate systems:

• Viewport coordinates: position relative to the visible browser window
• Document coordinates: position relative to the full page, including the scrolled area

The most reliable modern way to get an element’s visible position is:

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

This gives you:

• rect.left → X position
• rect.top → Y position

These values are relative to the viewport, not the full document.

If you want the position relative to the whole page, add the current scroll offset:

const rect = element.getBoundingClientRect();
const x = rect.left + window.scrollX;
const y = rect.top + .;

Think of a web page like a large poster seen through a small window.

• The poster is the full document.
• The window is the browser viewport.
• The element might be at one spot on the poster, but its visible position changes as you scroll the window.

So there are two useful answers to “Where is the element?”

• Inside the window → use getBoundingClientRect()
• On the full poster → use getBoundingClientRect() plus scroll values

This is why scrolling changes top and left from getBoundingClientRect(), even though the element has not moved in the document.

Basic syntax

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

console.log(rect.left); // X
console.log(rect.top);  // Y

Example: get the position of a div

<div id="box">Hello</div>

<script>
  const box = document.getElementById("box");
  const rect = box.getBoundingClientRect();

  console.log("X:", rect.left);
  console.log("Y:", rect.top);
</>

Consider this code:

<div id="card" style="margin-top: 200px; margin-left: 100px;">Card</div>

<script>
  const card = document.getElementById("card");
  const rect = card.getBoundingClientRect();

  console.log(rect.left);
  console.log(rect.top);
</script>

What happens step by step

1. JavaScript finds the element with id="card".
2. It calls getBoundingClientRect() on that element.
3. The browser calculates the element’s size and position in the viewport.
4. rect.left stores the distance from the left edge of the viewport.
5. rect.top stores the distance from the top edge of the viewport.
6. The values are printed to the console.

Important detail

If the page is scrolled:

Developers read element positions in many practical situations:

Tooltips and dropdowns

A tooltip often needs to appear next to a button.

const buttonRect = button.getBoundingClientRect();
tooltip.style.left = `${buttonRect.right}px`;
tooltip.style.top = `${buttonRect.top}px`;

Scroll-based animations

You can check when an element enters the viewport.

const rect = section.getBoundingClientRect();
if (rect.top < window.innerHeight) {
  console.log("Element is visible or entering view");
}

Drag-and-drop interfaces

When dropping an item, you may compare mouse coordinates with element positions.

Canvas or overlay alignment

If you draw a highlight box over an element, you need its exact screen location.

Testing and automation

UI tests sometimes verify whether an element appears in the expected place.

In real projects, developers usually use element positions as part of larger patterns rather than by themselves.

Guard clauses

Make sure the element exists before reading its position.

const modal = document.querySelector(".modal");
if (!modal) return;

const rect = modal.getBoundingClientRect();

Recalculate on resize or scroll

Positions can change when:

• the window resizes
• the page scrolls
• content loads later
• fonts or images change layout

function updatePosition() {
  const rect = target.getBoundingClientRect();
  console.log(rect.left, rect.top);
}

window.addEventListener("scroll", updatePosition);
window.addEventListener("resize", updatePosition);

Positioning floating UI

Popovers, menus, and custom dropdowns often use getBoundingClientRect() to place themselves near another element.

1. Confusing viewport position with page position

Broken assumption:

const rect = element.getBoundingClientRect();
console.log(rect.top); // Not always page Y

Why it happens:

• rect.top is relative to the viewport
• scrolling changes it

Fix:

const y = element.getBoundingClientRect().top + window.scrollY;

2. Reading the element before it exists

Broken code:

const box = document.getElementById("box");
console.log(box.getBoundingClientRect());

If the script runs before the element is parsed, box may be null.

Fix:

// Viewport position
const rect = element.getBoundingClientRect();
const x = rect.left;
const y = rect.top;

// Document position
const pageX = rect.left + window.scrollX;
const pageY = rect.top + window.scrollY;

Key properties

• rect.left → X relative to viewport
• rect.top → Y relative to viewport
• rect.right → right edge relative to viewport
• rect.bottom → bottom edge relative to viewport
• rect.width → width of element
• rect.height → height of element

Rules to remember

• getBoundingClientRect() is usually the best choice for element position
• Its values change when the page scrolls
• Add window.scrollX and window.scrollY for page coordinates

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

Use getBoundingClientRect():

const rect = div.getBoundingClientRect();
console.log(rect.left, rect.top);

Does getBoundingClientRect() return page coordinates?

No. It returns coordinates relative to the viewport. Add window.scrollX and window.scrollY for page coordinates.

What is the difference between top and offsetTop?

• rect.top is relative to the viewport
• offsetTop is relative to the element’s offset parent

They are not interchangeable.

Why does the Y value change when I scroll?

Because getBoundingClientRect() measures position relative to the visible browser window, not the full document.

Can I use this for images too?

Yes. works for , , , and most other HTML elements.

• DOM selection — You need to select an element before reading its position.
• Viewport — Element position is often measured relative to the visible browser area.
• Document scroll — Scroll offsets are required to convert viewport coordinates into page coordinates.
• CSS positioning — static, relative, absolute, and fixed affect how elements are placed.
• Event handling — Scroll and resize events are often used when recalculating positions.
• Element size measurement — width, height, and bounding rectangles are often used together.
• Offset properties — offsetTop and offsetLeft are related but use a different coordinate reference.
• Client vs page coordinates — Mouse events also use multiple coordinate systems, similar to element positioning.