2

Estou conseguindo sobrepor as divs mas nao consigo colocar um nav em cima que não seja sobreposto.

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

1
  • Se possível coloque o seu código já com o HTML com a NAV e o CSS dela
    – hugocsl
    7/12/2018 às 11:42

1 Resposta 1

4

Vc consegue resolver isso colocando a primeira div Azul com 100% da altura menos a altura da própria Nav, para isso use height:calc(100% - 50px) 50px é a altura da Nav. Faça a mesma coisa com altura da div Vermelha.

Na div Vermelha além do ajuste da altura use position:sticky e não position:relative, e nela coloque um top:50px, 50px é a altura da Nav, e pronto nada encobrira ou ficara com o conteúdo escondido abaixo da 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 não funciona no IE https://caniuse.com/#feat=css-sticky

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .