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

设置为调用上述css的Html

<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

margin-top和left应该是％。那就是它的叠加becoz of px

Answer 2

首先，看起来你错过了几个div。 goplay div没有结束标记（好吧它有一个但不是那个有用）你的底部间隔也看起来像是缺少一个结束标签。不确定它是否应该包装任何东西或什么。

也许你有一些复制/粘贴错误？

通常如果设置负边距，它将覆盖其他div。在大多数情况下，您不应该使用负边距。

当屏幕尺寸减小时，div与另一个div重叠

2 个答案: