How to get HTML element X, Y position using JavaScript

Last Updated: 18th September 2025

If you're looking to determine the exact position of an HTML element on a webpage, JavaScript offers two simple methods to retrieve its X and Y coordinates. In this tutorial, you'll learn how to use the offsetLeft and offsetTop properties for basic positioning, as well as the powerful getBoundingClientRect() method for precise, viewport-relative measurements. Whether you're building interactive UI components or debugging layout issues, these techniques will help you accurately track element positions in real time.

1) Using offsetLeft and offsetTop properties

This example features a draggable <div> element that you can move freely across the webpage. Once you've positioned it anywhere on the screen, it will display its current X and Y coordinates. It's a practical way to understand how JavaScript can dynamically capture element positioning in real time.

<!DOCTYPE html>
<html>
<head>
  <style>
    #theText {
      width: 200px;
      padding: 10px;
      border: solid 1px #ddd;
      cursor: move;
      position: absolute;  /* This is essential */
      left: 100px;
      top: 150px;
    }
  </style>
</head>
<body>
  <p>Drag the text and stop. It will show you the X and Y coordinates of the element.</p>
  <div id='theText'>some content here...</div>
  
  <p id="coord"></p>    <!-- Show x, y coordinates here. -->
</body>

<script>
  const theText = document.getElementById('theText');
  let offsetX, offsetY, isDragging = false;

  theText.addEventListener('mousedown', function(e) {
    isDragging = true;
    offsetX = e.clientX - theText.offsetLeft;
    offsetY = e.clientY - theText.offsetTop;
  });

  document.addEventListener('mousemove', function(e) {
    if (isDragging) {
      theText.style.left = (e.clientX - offsetX) + 'px';
      theText.style.top = (e.clientY - offsetY) + 'px';
    }
  });

  document.addEventListener('mouseup', function() {
    isDragging = false;
  });

  theText.addEventListener('click', function() {
    document.getElementById('coord').innerHTML =
      'X: ' + theText.offsetLeft + ' Y: ' + theText.offsetTop;
  });
</script>
</html>

Try it

2) Using getBoundingClientRect() Method

Another powerful way to retrieve the X and Y coordinates of an HTML element is by using the getBoundingClientRect() method. This built-in JavaScript function returns a DOMRect object containing the size of the element and its position relative to the viewport, not the entire document.

👉 I have explained "why this method is useful" after this code.

<!DOCTYPE html>
<html>
<head>
  
<style>
  body { 
    height: 2000px; 
  }
  
  #theText { 
    width: 200px; 
    padding: 10px; 
    border: solid 1px #ddd;
    position: absolute;
    bottom: 2%;
    left: 40%;
  }
  
  p { 
    position: fixed;
  } 
  #coord1 { 
    top: 50px; 
  }
</style>
</head>
<body>
  <h2>Scroll this page up and down</h2>
  <div id='theText'>some content here...</div>

  <!-- Show x, y coordinates -->
  <p id="coord"></p>
  <p id="coord1"></p>
</body>

<script>
    window.addEventListener('scroll', function (e) {
        document.getElementById('coord').innerHTML =
            'X: ' + theText.offsetLeft + ' Y: ' + theText.offsetTop;

        document.getElementById('coord1').innerHTML =
            'X: ' + theText.getBoundingClientRect().left + 
            ' Y: ' + theText.getBoundingClientRect().top;
    });
</script>
</html>

Try it

Why Use getBoundingClientRect()?

1. Viewport relative positioning: It is perfect for tasks like aligning tooltips, popups, or floating elements near a target element, especially when the page is scrollable.
2. Responsive design: Helps dynamically adjust layout or animations based on where elements appear on screen.
3. Scroll aware interactions: Since the values update as the user scrolls, it's ideal for sticky headers, lazy loading, or triggering animations when elements enter the viewport.

🚀 Articles you don't want to miss • What is map() function in JavaScript? Benefits of using map() function in your application.
• How to get the X character (any particular character) in a string using JavaScript
• How to create a simple CRUD application using plain JavaScript
• How to use .map() function to extract only numbers from an array of values in JavaScript?

← PreviousNext →