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

[Anonymous]

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

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

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>



[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.

Мои два топнава:
Topnav верхнего уровня отображает ссылки, которые маршрут на разные части страницы

topnav 1+2. (В моем коде показан только второй топнав)

Что мне здесь не хватает? Я думал, что настройка z-индексов будет достаточно.>

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