JavaScript Image Position with style.left and style.top

Diagram showing CSS left and top values for positioning an image

JavaScript can reposition a positioned image by changing its inline CSS left and top values. Those inset properties take effect when the element participates in a positioning scheme such as position: absolute, relative, fixed, or sticky.

const image = document.getElementById('i1');
image.style.left = '200px';
image.style.top = '100px';

Table of Contents

Set left and top
Move to fixed edges
Move in steps
Animate position
Drag with pointer input

Set image position with style.left and style.top Top ↑

Always include a CSS unit when assigning these values. A numeric-looking string such as "200" is incomplete; "200px" is explicit and portable.

image.style.position = 'absolute';
image.style.left = '200px';
image.style.top = '100px';

Move the image Up, Left, right and down Top ↑

The original four controls are preserved. The demo now calculates the available container dimensions instead of hard-coding an 800-pixel right position, so it also works on mobile screens.

Demo of moving image

Complete working source

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo of Image position style.top and style.left</title>
  <link rel="stylesheet" href="../images/all11.css" type="text/css">
</head>
<body>
<div id="position-area" style="position:relative; min-height:360px; border:1px solid #ccc; overflow:hidden;">
  <img src="images/help.jpg" id="i1" alt="Help icon used for position demo"
       style="position:absolute; left:50%; top:100px; max-width:80px;">
</div>
<div>
  <button type="button" data-direction="up">Up</button><br>
  <button type="button" data-direction="left">Left</button>
  <button type="button" data-direction="right">right</button><br>
  <button type="button" data-direction="down">down</button>
</div>
<script>
const image = document.getElementById('i1');
const area = document.getElementById('position-area');

function moveImage(direction) {
  const padding = 20;
  const maxLeft = Math.max(padding, area.clientWidth - image.offsetWidth - padding);
  const maxTop = Math.max(padding, area.clientHeight - image.offsetHeight - padding);

  const positions = {
    up: { top: padding },
    down: { top: maxTop },
    left: { left: padding },
    right: { left: maxLeft }
  };

  const next = positions[direction];
  if (next.top !== undefined) image.style.top = `${next.top}px`;
  if (next.left !== undefined) image.style.left = `${next.left}px`;
}

document.querySelectorAll('[data-direction]').forEach((button) => {
  button.addEventListener('click', () => moveImage(button.dataset.direction));
});
</script>
</body>
</html>

Move an image in 50-pixel steps Top ↑

The original image-position-demo1.php changes the current offset in 50-pixel increments. The modern version keeps that behavior and clamps movement to the responsive demo area.

Demo: move image in steps

const currentLeft = image.offsetLeft;
image.style.left = `${currentLeft + 50}px`;

Animate top and left values Top ↑

The original Start demo moves the image downward and then toward the right while displaying its X/Y coordinates. The modern version retains that single control and uses requestAnimationFrame() rather than a string passed to setTimeout().

Demo: animated image position

Example: Making an Image Draggable Top ↑

Draggable Image: the original mouse-drag facility is preserved. The updated demo uses Pointer Events so the same interaction can work with a mouse, pen, or touch input. Pointer capture keeps movement associated with the image while the active pointer is being dragged.

DEMO : Dragging image by Mouse

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Drag an Image with Pointer Events</title></head><body>
<div id="drag-area" style="position:relative; min-height:360px; border:1px solid #ccc; overflow:hidden;">
  <img src="images/help.jpg" id="myImage" alt="Draggable help icon"
       style="position:absolute; left:50px; top:50px; max-width:80px; cursor:grab; touch-action:none;">
</div>
<script>
const image = document.getElementById('myImage');
const area = document.getElementById('drag-area');
let shiftX = 0;
let shiftY = 0;

image.addEventListener('pointerdown', (event) => {
  const imageRect = image.getBoundingClientRect();
  shiftX = event.clientX - imageRect.left;
  shiftY = event.clientY - imageRect.top;
  image.setPointerCapture(event.pointerId);
});

image.addEventListener('pointermove', (event) => {
  if (!image.hasPointerCapture(event.pointerId)) return;

  const areaRect = area.getBoundingClientRect();
  const maxLeft = area.clientWidth - image.offsetWidth;
  const maxTop = area.clientHeight - image.offsetHeight;
  const left = Math.min(maxLeft, Math.max(0, event.clientX - areaRect.left - shiftX));
  const top = Math.min(maxTop, Math.max(0, event.clientY - areaRect.top - shiftY));

  image.style.left = `${left}px`;
  image.style.top = `${top}px`;
});

image.addEventListener('dragstart', (event) => event.preventDefault());
</script></body></html>

offsetLeft & offsetTop of Image Movement of image by button click Image Object

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect: