當我的瀏覽器調整大小時，我的文字上下移動

Question

我一直在爲我的網站設計一個新的主頁，但 我無法弄清爲什麼當我調整我的瀏覽器的大小時，文字會上下移動。

我的CSS代碼：

.welcome { 
    width: 100%; 
    height: 60px; 
    background-color: #4CAF50; 
    margin-top: -4px; 
} 

.welcome h1 { 
    font-family: 'Lato', sans-serif; 
    color: white; 
    font-size: 40px; 
    margin-bottom: 20px; 
    margin-top: 5px; 
    margin-left: 15px; 
} 

.welcome p { 
    color: white; 
    overflow: hidden; 
    float: left; 
    position: relative; 
    top: -50em; 
} 

#welcome-background { 
    width: 100%; 
    height: auto; 
    max-height: 1000px; 
    margin-top: -16px; 
    min-height: 500px; 
} 

如果你看到任何其他的CSS錯誤的，請讓我知道

我的HTML：

<div class="welcome"> 
    <h1 style="float:left;">About Us</h1> 
    <img id="welcome-background" style="" src="/new_homepage/img/black-bg.png"> 
    <p style="color: white; position: relative; top: -50em;">Hardwire Studios' is a gaming community that has servers am a variety of games, such as Minecraft, Garry's Mod, Counter-Strike: Global Offensive, Rust, and many more coming in the future. We try to provide the best "Lag-Free" experience on all of our server, yet also make them as fun and enjoyable as they can be, by only using the best of the best host companies. You can also see our future plan's by simply scrolling down a little more, until you find the "Future Plan's" Section.</p> 
</div> 

Answer 1

你的款採用相對定位，這意味着它仍然處於文檔的流程中。由於它在圖像之後，其垂直位置隨着圖像高度的變化而變化。

取而代之。將圖像和段落放置在相對定位的包裝元素中，然後將絕對定位在段落的位置。

這可能是這個樣子：

HTML：

<div id="welcome-wrapper"> 
    <img id="welcome-background" src="..."> 
    <p>Hardwire Studios' is...</p> 
</div> 

CSS：

#welcome-wrapper { 
    position: relative; 
} 

#welcome-wrapper p { 
    position: absolute; 
    top: 10em; 
}