Demo of Image position with style.top and style.left

Use the original four controls to move the image to the corresponding edge of the responsive demo area.

JavaScript

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));
});

HTML

<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>

Complete working page

<!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>