CODEWITHSUNDEEP
javascripthtmlcss
dota2pro
dota2pro

Reputation: 7856

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

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>

Upvotes: 0

Views: 79

Answers (2)

Bibberty
Bibberty

Reputation: 4768

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>

Upvotes: 0

James Allen
James Allen

Reputation: 1019

#redDiv {
  position: absolute;
}

Upvotes: 1

Related Questions