HTML/CSS Position sticky is not working properly - html

Question

I am trying to make a div position: sticky; but it doesn't work, here's my code:
body {
height: 1000px;
}
header {
position: absolute;
width: 100%;
z-index: 100;
}
.top-navbar {
height: 100px;
background-color: green;
}
nav {
position: -webkit-sticky !important;
position: sticky;
top: 0;
align-self: flex-start;
background-color: orange;
}
<header>
<div class="top-navbar">
<h2>top navbar</h2>
</div>
<nav>
<h1>My navbar</h1>
</nav>
</header>

Answer 1

Temani has a great solution, but I wanted to point out the reason your solution isn't working. Position sticky is "relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor)". In your case, that's the header, and the nav is already stuck to it. However, if you move the nav below the header (as in the example below), you'll see it works:
body {
height: 1000px;
}
.top-navbar {
height: 100px;
background-color: green;
}
nav {
position: sticky;
top: 0;
background-color: orange;
}
<header>
<div class="top-navbar">
<h2>top navbar</h2>
</div>
</header>
<nav>
<h1>My navbar</h1>
</nav>

Answer 2

it seems you only want to keep the nav visible on scroll. In this case do it like below. Move sticky to header and consider a negative value for top equal to the height of top-navbar
body {
height: 1000px;
}
header {
position: sticky;
top: -100px;
}
.top-navbar {
height: 100px;
background-color: green;
}
nav {
background-color: orange;
}
h1,h2 {
margin:0;
}
<header>
<div class="top-navbar">
<h2>top navbar</h2>
</div>
<nav>
<h1>My navbar</h1>
</nav>
</header>