Не дать изображению заголовка перекрывать панель навигации, используя только HTML и CSS? ⇐ CSS

[Anonymous]

Панель навигации тоже находится ниже, а изображение остается на месте.
Можно ли как-нибудь исправить это без JavaScript? Я могу использовать только
css и html
Кроме того, z-index, похоже, не работает?
Для большего контекста это не так это не выглядит так, когда я не помещаю изображение заголовка
С

Без изображения заголовка

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

* {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}

body {
font-family: 'Roboto', sans-serif;
}

.sidebar {
z-index: 999;
}

.sidebar {
position: fixed;
left: -250px;
width: 250px;
height: 100%;
background: #042331;
transition: all .5s ease;
}

.sidebar header {
font-size: 22px;
color: white;
line-height: 70px;
text-align: center;
background: #063146;
user-select: none;
}

.sidebar ul a {
display: block;
height: 100%;
width: 100%;
line-height: 65px;
font-size: 20px;
color: white;
padding-left: 40px;
box-sizing: border-box;
border-bottom: 1px solid black;
border-top: 1px solid rgba(255, 255, 255, .1);
transition: .4s;
}

ul li:hover a {
padding-left: 50px;
}

.sidebar ul a i {
margin-right: 16px;
}

#check {
display: none;
}

label #btn,
label #cancel {
position: absolute;
background: #042331;
border-radius: 3px;
cursor: pointer;
}

label #btn {
left: 40px;
top: 25px;
font-size: 35px;
color: white;
padding: 6px 12px;
transition: all .5s;
}

label #cancel {
z-index: 1111;
left: -195px;
top: 17px;
font-size: 30px;
color: #0a5275;
padding: 4px 9px;
transition: all .5s ease;
}

#check:checked~.sidebar {
left: 0;
}

#check:checked~label #btn {
left: 250px;
opacity: 0;
pointer-events: none;
}

#check:checked~label #cancel {
left: 195px;
}

#check:checked~section {
margin-left: 250px;
}

section {
background: url(bg.jpeg) no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
transition: all .5s;
}

/*  */
.header-image {
background-image: url("https://images.genius.com/6c7454cd6e21bb1afb97a818253f4ef2.1000x1000x1.png");
height: 300px;
background-position: center;
background-size: cover;

}

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

[*]






[/i]
[i][/i]


help
[list]
[url=#][i][/i]Dashboard[/url]
[*][url=#][i][/i]Shortcuts[/url]
[*][url=#][i][/i]Overview[/url]
[*][url=#][i][/i]Events[/url]
[*][url=#][i][/i]About[/url]
[*][url=#][i][/i]Services[/url]
[*][url=#][i][/i]Contact[/url]
[/list]

Подробнее здесь: https://stackoverflow.com/questions/793 ... ml-and-css