overlapping divs, but leaving a top not overlapped

Question

overlapping divs, but leaving a top not overlapped

Navigation

#1 by (4 votes)

2

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>

html css

asked by anonymous 07.12.2018 / 12:19

1 answer

Add seconds, minutes and / or hours in datetime field Selection Elements

score 4 · Accepted Answer

You can solve this by putting the first div Blue with 100% height less the height of the Nav itself, so use height:calc(100% - 50px) 50px is the height of Nav . Do the same thing with height of div Red.

In% Red% besides height adjustment use div and not position:sticky , and put position:relative in it, 50px is the height of top:50px , and ready nothing will hide or hide hidden content below 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>

NOTE: Nav does not work in IE link a>