How to force content to be not pushed down on showing a div?

Question

How can I force the image and content to not be pushed down when i click on the button ?

  showRedDiv = () => {
    const el = document.querySelector('#redDiv');
    el.style.display = "block";
  };

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>


<div style=" border: 3px solid gold; height: 50px;"></div>
<div style=" border: 3px solid red; height: 50px; display: none;" id="redDiv">This should be overlayed on the image </div>

<img
  src="https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-577160911.jpg">
<br>
<button onclick="showRedDiv()">
  Show Red Div
</button>
</body>
</html>

I would look up absolute positioning (maybe this: https://stackoverflow.com/a/8709295/5063688). Add a container element around the `` and `#redDiv` that's relatively positioned, make it look the way you want before any javascript, then do the display property stuff. — git-e-up, Aug 09 '19 at 22:00

score 1 · Answer 1 · answered Aug 09 '19 at 21:59

1

#redDiv {
  position: absolute;
}

answered Aug 09 '19 at 21:59

James Allen

969
4
16

score 0 · Accepted Answer · answered Aug 09 '19 at 22:05

More a CSS question really, but postion: absolute will cause it to overlay.

showRedDiv = () => {
    const el = document.querySelector('#redDiv');
    el.style.display = "block";
  };

#redDiv {
  position: absolute;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>


<div style=" border: 3px solid gold; height: 50px;"></div>
<div style=" border: 3px solid red; height: 50px; display: none;" id="redDiv">This should be overlayed on the image </div>

<img
  src="https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-577160911.jpg">
<br>
<button onclick="showRedDiv()">
  Show Red Div
</button>
</body>
</html>

How to force content to be not pushed down on showing a div?

2 Answers2