overlay Ivs, but leaving a top without being overlaid

Question

I’m able to override the Divs but I can’t place a Nav on top that isn’t overlaid.

*{
    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>

Answer 1

You can fix it by putting the first div Blue with 100% of the height less own height Nav, for that use height:calc(100% - 50px) 50px is the height of Nav. Do the same thing with height of div Red.

In the div Red plus height adjustment use position:sticky and not position:relative, and in it place a top:50px, 50px is the height of Nav, and soon nothing had covered up or been left with the contents hidden below the Nav.

*{
    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: calc(100% - 50px);
    width: 100%;
    top:50px;
    margin-top: 0;
}

.div2{
    height: calc(100% - 50px);
    background-color: red;
    position: sticky;
    z-index: 2;
    margin-top: 100vh;
    top: 50px;
}
nav {
    height: 50px;
    width: 100%;
    position: fixed;
    top: 0;
    text-align: center;
    line-height:50px
}

    

<nav>
    MINHA NAV!
</nav>
<div class="div1">
    <h1>Conteudo div1</h1>
</div>
<div class="div2">
    <h2>Conteudo div2</h2>
</div>

OBS: position:sticky does not work in IE https://caniuse.com/#feat=css-Sticky