我的 2 div 不断重叠

Question

尝试在此处关注其他类似问题，但我找不到解决问题的方法。

我有 2 个 div，第一个是全屏的，页面底部有一个按钮，当我单击它时，将向下滚动到另一个 div。但是在我身上不断发生的是 2 个 div 重叠。

    header{
    	background-image: url("../img/img_header_mobile.jpg");
    	background-position: top center;
    	position: fixed;
    	width: 100%;
    	height: 100%;
    	background-size: cover;
    	float: left;
    }
    
    .imagem-menu{
    	width: 321px;
    	height: 569px;
    	background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.01) 50%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    	min-height: 100%;
    	min-width: 100%;
    }
    
    .botao-scroll{
    	background: url("../img/botao_scroll.png");
    	border: none;
    	background-size: 60px 60px;
    	background-color: none;
    	margin-left: 7px;
    	width: 60px;
    	height: 60px;
    	position: absolute;
    	bottom: 5%;
    }
    
    #slidepassos{
    height: 667px;
    width: 100%;
    background: green;
    float: left;
    clear: left;
    
    }

   
    <header>
        <a href="#slidepassos" class="botao-scroll"></a>
        <div class="imagem-menu"></div>
        </header>
    <div id="slidepassos" ="slidepassos"><a href="slidepassos">
    	side com passos</a>
    </div>

Answer 1

是的，它缺少第二个 div。我希望它会在标题之后 试试这个

header{
    background-image: url("../img/img_header_mobile.jpg");
    background-position: top center;
    position: relative;
    border:1px solid red;
    width: 100%;
    height: 100vh;
    background-size: cover;
    float: left;
}

.imagem-menu{
  position: absolute;
  border:1px solid yellow;
    width: 321px;
    height: 100vh;
    background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.01) 50%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    min-height: 100%;
    min-width: 100%;
}

.botao-scroll{
  z-index:2;
    background: url("../img/botao_scroll.png");
    border: 1px solid black;
    background-size: 60px 60px;
    background-color: none;
    margin-left: 7px;
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: 5%;
}
.botao-scroll:hover
{
  color: red;
}

#slidepassos{
  position:relative;
height: 667px;
width: 100%;
background: green;
float: left;
border: 1px solid blue;
}

<header>
<a href="#slidepassos" class="botao-scroll">
  scroll down
</a>
<div class="imagem-menu"></div>
</header>
<div id="slidepassos">
  test
</div>