I'm able to override the divs but I can not put a nav on it that does not overlap.
*{
margin:0;
padding:0;
box-sizing: border-box;
}
html, body{
height: 100%;
}
h1,h2{
color:#ccc;
display: block;
text-align: center;
}
.div1 {
background-color:blue;
z-index: 1;
position:fixed;
height: 100%;
width: 100%;
top:0px;
margin-top: 0;
}
.div2{
height: 100%;
background-color: red;
position: relative;
z-index: 2;
margin-top: 100vh;
}
<div class="div1">
<h1>Conteudo div1</h1>
</div>
<div class="div2">
<h2>Conteudo div2</h2>
</div>