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

您的段落使用 relative 定位，这意味着它仍然在文档的流程中。因为它出现在图像之后，它的垂直位置会随着图像高度的变化而变化。

相反。将图像和段落放在相对定位的包装元素内，然后使用绝对定位来定位段落。

这看起来像这样：

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

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

1 个答案: