如何迫使内容不被压低以显示div？

Question

当我单击按钮时，如何强制图像和内容不被按下？

  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>

Answer 1

#redDiv {
  position: absolute;
}

Answer 2

确实还有更多CSS问题，但postion: absolute会导致它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>

如何迫使内容不被压低以显示div？

问题描述

2 个解决方案

解决方案1
1 2019-08-09 21:59:30

解决方案2
0 已采纳 2019-08-09 22:05:00

如何迫使内容不被压低以显示div？

问题描述

2 个解决方案

解决方案1 1 2019-08-09 21:59:30

解决方案2 0 已采纳 2019-08-09 22:05:00

解决方案1
1 2019-08-09 21:59:30

解决方案2
0 已采纳 2019-08-09 22:05:00