Позиционирование CSS по z-индексу ⇐ CSS

[Гость]

Я пытаюсь выяснить, почему мое наложение (в @media (минимальная ширина: 768 пикселей)) не находится под моей навигационной панелью, хотя мой z-индекс должен указывать, что оно установлено под ним.
и снаружи @media (на маленьком экране) работает отлично и действительно находится в разделе navbar-items.
Я много пробовал возиться с z-index, но, кажется, мне это удалось зайдите под панель навигации и оставьте ее в верхнем элементе div.

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

.navbar {
width: 100%;
height: 70px;
background-color: #3f4d67;
padding: 0 20px;
color: #fff;
}

.navbar-items {
position: fixed;
top: 0;
left: -100%;
width: 264px;
height: 100vh;
background-color: #3f4d67;
color: #fff;
transition: left 0.4s ease-in-out;
z-index: 1000;
}

.navbar-items.open {
transform: translateY(0);
left: 0;
}

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
display: none;
z-index: 10;
pointer-events: none;
}

.overlay.open {
display: block;
pointer-events: all;
}
.logo-navicon {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 70px;
align-items: center;
}
.logo-img {
width: 35px;
height: 35px;
}
.logo-container {
display: flex;
align-items: center;

width: 100%;
}
.nav-icon {
width: 20px; /* Adjust the width */
height: 15px; /* Adjust the height */
position: relative;
transform: rotate(0deg);
transition: 0.5s ease-in-out;
cursor: pointer;
}
.big-screen-nav-icon {
display: none;
}
.nav-icon span {
display: block;
position: absolute;
height: 3px; /* Adjust the height */
width: 100%;
background: #a9b7d0;
border-radius: 3px; /* Adjust the border radius */
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: 0.25s ease-in-out;
}

.nav-icon span:nth-child(1) {
top: 0px;
}

.nav-icon span:nth-child(2),
.nav-icon span:nth-child(3) {
top: 5px; /* Adjust the top position */
}

.nav-icon span:nth-child(3) {
top: 10px; /* Adjust the top position */
}

.nav-icon.open span:nth-child(1) {
top: 5px; /* Adjust the top position */
transform: rotate(135deg);
}

.nav-icon.open span:nth-child(2) {
opacity: 0;
left: -20px; /* Adjust the left position */
}

.nav-icon.open span:nth-child(3) {
top: 5px; /* Adjust the top position */
transform: rotate(-135deg);
}
@media (min-width: 768px) {
.navbar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 264px; /* Adjust the width as needed */
background-color: #3f4d67; /* Example background color */
z-index: 1000; /* Ensure the navbar is on top of other content */
height: 100vh;
transition: width 0.4s ease;
box-shadow: 1px 0 20px 0 #3f4d67;
}
.navbar-items {
position: initial;
width: 100%;
height: initial;
background-color: #3f4d67;
color: #fff;
transition: left 0.4s ease-in-out;
display: block;
}

.small-screen-nav-icon {
display: none;
}
.big-screen-nav-icon {
display: block;
}
.navbar.collapsed {
width: 80px;
}
.navbar.collapsed:hover {
width: 264px;
}
.navbar.collapsed:hover .overlay {
display: block;
}
}

Источник: https://stackoverflow.com/questions/781 ... ositioning