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

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