myfingershurt myfingershurt - 29 days ago 6
CSS Question

My 2 Div's keep overlaping

Tried to follow other similar questions here, but i cant find a solution for my problem.

I have 2 divs, the first one is full-screen with a button on the bottom of the page that when i click it, will scroll down to the other div. But what keeps happening to me is the 2 divs overlapping.

HTML:

<body>
<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>
</body>


CSS:

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;

}

Answer

Ya its missing the second div. I expect it will be after header try this one

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>