Set the Position of an Element using JavaScript

avatar

Borislav Hadzhiev

Fri Dec 31 20212 min read

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"

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.

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, you can create a reusable function, which accomplishes the job.
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'; });
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 theevent was 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.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee