Как правильно показать все элементы внутри двух перекрывающихся липких DOV ⇐ CSS

[Anonymous]

У меня есть Topnav (липкий, полная ширина Div) на моем веб-сайте с двумя A ссылками, расположенными справа от экрана. Эти ссылки имеют z-индекс: 2 . TopNav имеет z-Index: 0 .
Затем второй топнав с тем же стилем, но с кнопками, центрированными в середине, временно появляется, когда пользователь прокручивается через div . Я хочу, чтобы обе кнопки Topnav показали, как пользователь прокручивается через этот div , так что их кнопки были видны и кликабельны. Тем не менее, второй Topnav полностью охватывает первые ссылки Topnav при прочтении. < /P>

Код: Выделить всё

html

Код: Выделить всё

[url=/]Home[/url]
[url=/about]About[/url]



Lorem Ipsum



[list]
[*][url=javascript:void(0);]Show All[/url]
[*][url=javascript:void(0);]Hobbies[/url]
[*][url=javascript:void(0);]Family[/url]
[*][url=javascript:void(0);]House[/url]
[*][url=javascript:void(0);]Dogs[/url]
[/list]




Filterable pictures of Hobbies, Family, House, and Dog.

< /code>
css

body {
font-family: 'Roboto Condensed', sans-serif;
margin: 0;
color: black;

}

/* This topnav sticks throughout the page */
.topnav {
overflow: hidden;
color: white;
background-color: black;
position: sticky;
width: 100%;
top: 0px;
z-index: 0;

}

.topnav-right a {
color: white;
padding: 1.3vh;
text-decoration: none;
float: right;
z-index: 2;

}
.topnav-right a:hover {
color: gray;
}

.whitespace {
width: 100vw;
height: 100vh;
}
/* The div within which the second topnav would display
It should "combine" with the first topnav so that links from both bars work */
.topnav2-container{
min-height: 100vh;
min-width: 100vw;
}

.topnav2-filter {
text-align: center;
position: sticky;
top: 0px;
background-color: black;
color: white;
}

ul.topnav2-filter-links {

list-style: none;
padding: 0px;

}
ul.topnav2-filter-links > li {
display: inline-block;
margin: .5vh;
}

ul.topnav2-filter-links > li > a {
z-index: 1;
display: block;
padding: 8px 0;
text-decoration: none;
color: white;
}
ul.topnav2-filter-links > li > a:hover {
color: gray;
}
< /code>
My two topnavs:
the top-level topnav displays links that route to different parts of the page
Topnav one
topnav two: this second top-nav displays more buttons local to its parent div
Behavior I expect:
Buttons from both navigation bars show on top of the screen and they are clickable.
In my project, they visually overlap but the first topnav is not clickable.
topnav 1+2. (In my codepen, only the second topnav is shown)
What am I missing here? I thought setting the z-indexes like so would be enough.
codepen with relevant code

Подробнее здесь: https://stackoverflow.com/questions/796 ... ticky-divs