如何迫使內容不被壓低以顯示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