當屏幕尺寸縮小時，div在另一個div上重疊

Question

下面是一個簡單的html網頁，除了一個div（goplay）以外，當屏幕尺寸縮小時，會放置頁面的其他部分，而不是放在圖像下方。

樣式表外

#wrapperlp { 
     width: 100%; 
     margin: auto; 

    } 

    @media screen and (max-width: 800px) { 
     #wrapperlp { 
      width: 90%; 
      min-width: 100px; 
     } 
    } 

    #headerlp { 
     font-size: 30px; 
     color: white; 
     text-align: center; 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 

    #para { 
     font-size: 20px; 
     color: white; 
     text-align: center; 
    } 

    #game_img { 
     height: 250px; 
     width: auto; 
     margin-bottom: -30px; 
     position: relative; 
     display: inline-block; 
     float: left; 
     margin-top:-30px; 
     padding-top: 5px; 
     max-width: 100%; 
    } 

    #goplay { 
     position: relative; 
     display: inline-block; 
     float: right; 
    margin-top:-250px; 
     margin-left:80px 
    } 
    #spacer {    
     height: 40px;   
     margin-left: auto; 
     margin-right: auto; 
    width: 100%; 
    max-width: 900px; 
    padding-top:20px; 
    } 

的Html被設定爲調用上面的CSS

<div id="wrapperlp"> 
<div style="background-image: url(https://.jpg); height: 430px; width: 1000px; margin-left: auto; margin-right: auto; max-width: 100%;"> 
<div id="headerlp">Some Text</div> 
<div id="para">More Text</div> 
<div id="game_img"><a href="//www.youtube.com/" target="_blank"><br /> 
       <img src="https://.png" height="auto"/></a></div> 
</div> 
</div> 
<div id="goplay">----form----/div> 
<div id="spacer"> 
<div style="position: relative; float: left">Text</div> 
</div> 

Answer 1

邊距和左應該以％。這是它的覆蓋由px

Answer 2

首先，它看起來像你缺少一些div。 goplay div沒有結束標籤，（它有一個但沒有結果） 另外，您的底部空格鍵看起來也缺少結束標籤。不知道它是否應該包裹任何東西或什麼。

也許你有一些複製/粘貼錯誤？

通常情況下，如果您設置負邊距，則會覆蓋其他div。大部分情況下，您不應該使用負邊距。