Set the Position of an Element using JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Table of Contents #

  1. Set the Position of an Element
  2. Position an Element under the Mouse on Click

Set the Position of an Element using JavaScript #

To set the position of an element:

  1. Select the element and set it's position property to absolute.
  2. Use the top property to set the element's vertical position, e.g. box.style.top = '150px'.
  3. Use the left property to set the element's horizontal position, e.g. box.style.left = '150px'.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box" style="background-color: salmon; width: 100px; height: 100px"> Box 1 </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const box = document.getElementById('box'); box.style.position = 'absolute'; box.style.top = '150px'; box.style.left = '150px'; console.log(box.style.top); // 👉️ "150px" console.log(box.style.left); // 👉️ "150px"

set position of element

We first set the element's position to absolute.

When an element is positioned as absolute, it is removed from the normal document flow.

The element's final position is determined by the values of top, right, bottom and left properties.

The top, right, bottom and left properties have no effect on non-positioned elements.

We set the element's top CSS property to 150px, which specifies the distance to the top edge of the element's containing block.

We then used the left property to set the distance to the left edge of the element's containing block.

If you have to set the element's position at multiple different places in your code, create a reusable function.
index.js
function positionElement(el, x, y) { el.style.position = 'absolute'; el.style.left = x + 'px'; el.style.top = y + 'px'; } const box = document.getElementById('box'); console.log(positionElement(box, 50, 150)); console.log(box.style.left); // 👉️ "50px" console.log(box.style.top); // 👉️ "150px"

The function takes the element, the x and y position as parameters, sets the element's position property to absolute and positions it.

Position an Element under the Mouse on Click #

To position an element under the mouse on click:

  1. Set the element's position property to absolute.
  2. Add a click event listener to the document object.
  3. Each time the mouse is clicked, set the element's top and left properties to the coordinates of the mouse.

Here is the HTML for the next example.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box" style="background-color: salmon; width: 100px; height: 100px"> Box 1 </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const box = document.getElementById('box'); box.style.position = 'absolute'; document.addEventListener('click', function handleClick(event) { box.style.top = event.clientY - 50 + 'px'; box.style.left = event.clientX - 50 + 'px'; });

position element under mouse on click

If you open your browser and click at different places on the screen, you will see that the element gets positioned under your mouse cursor.

We added a click event listener on the document object, which invokes a function anytime the document is clicked.

We then used the event object to get the coordinates of the mouse when the event is dispatched.

Your requirements may vary, but to position the element in the center of the cursor, we subtracted 50 from the clientY and clientX coordinates.

The clientY property provides the vertical coordinate at which the event occurred.

And the clientX property provides the horizontal coordinate at which the MouseEvent event occurred.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.