Skip to main content

How to Set the Position of an Element with JavaScript

Dynamically changing an element's position on the page is a core task in creating interactive user interfaces, from building custom tooltips to creating draggable elements. In JavaScript, you can control an element's position by manipulating its CSS position, top, left, right, and bottom properties.

This guide will teach you the standard method for setting an element's position using its style object and explain the crucial CSS position property that makes it all work.

The Core Concept: The CSS position Property​

Before you can position an element with top or left in JavaScript, you must first set its CSS position property to a value other than static (the default). The most common values for dynamic positioning are:

  • position: relative;: The element is positioned relative to its normal position in the document flow. Setting top: 10px; will move it 10 pixels down from where it would normally be.
  • position: absolute;: The element is removed from the normal document flow and is positioned relative to its nearest positioned ancestor. This is the most common choice for placing an element at a specific (x, y) coordinate on the page.
  • position: fixed;: The element is positioned relative to the browser viewport. It will stay in the same place even when the page is scrolled.

An element with the default position: static; will not be affected by the top, left, right, or bottom properties.

The Solution: Setting top and left in JavaScript​

Once an element is "positioned" (i.e., its position is not static), you can set its coordinates by assigning string values to its style object.

Problem: you have a div and want to move it to a specific location on the page.

HTML:

<div id="box" style="width: 100px; height: 100px; background-color: salmon;">Box</div>

Solution: First, set the position property, then set the coordinates.

let box = document.getElementById('box');

// 1. Make the element positionable.
box.style.position = 'absolute';

// 2. Set its coordinates. The values must be strings with a CSS unit.
box.style.left = '150px';
box.style.top = '200px';

After this code runs, the top-left corner of the div will be located 150 pixels from the left edge and 200 pixels from the top edge of its containing block (in this case, the <body>).

How It Works: style Property and CSS Units​

  • element.style: This property gives you access to the element's inline styles. Any changes you make here are equivalent to editing the style="..." attribute in the HTML.
  • CSS Units are Required: When you set position properties, you must provide a string that includes a valid CSS unit, such as px (pixels), % (percent), em, or rem. Assigning a number (e.g., box.style.left = 150;) will not work.

Practical Example: Centering an Element on the Page​

This script demonstrates a reusable function that positions an element in the absolute center of the viewport.

/**
 * Positions an element in the center of the viewport.
 * @param {HTMLElement} el - The element to center.
 */
function centerElement(el) {
  // Make sure the element is positionable
  el.style.position = 'absolute';
  
  // Get the element's dimensions
  let elWidth = el.offsetWidth;
  let elHeight = el.offsetHeight;
  
  // Get the viewport's dimensions
  let viewportWidth = window.innerWidth;
  let viewportHeight = window.innerHeight;
  
  // Calculate the center position
  let topPosition = (viewportHeight / 2) - (elHeight / 2);
  let leftPosition = (viewportWidth / 2) - (elWidth / 2);
  
  // Set the styles, including the 'px' unit
  el.style.top = `${topPosition}px`;
  el.style.left = `${leftPosition}px`;
}

// Example Usage:
let box = document.getElementById('box');
centerElement(box);

Conclusion​

Setting an element's position with JavaScript is a simple process that requires two key steps.

  1. First, you must set the element's CSS position property to a value like absolute, relative, or fixed.
  2. Then, you can set its coordinates using the element.style.top and element.style.left properties. Remember to provide a string value that includes a CSS unit (e.g., '150px').

By mastering this technique, you can dynamically control the layout of your web page and create rich, interactive experiences.

Table of Contents