当我的浏览器调整大小时，我的文字上下移动

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; 
}