Verhindern Sie, dass das Headerbild die Navigationsleiste überlappt, indem Sie nur HTML und CSS verwenden? ⇐ CSS

[Guest]

Die Navigationsleiste ist auch niedriger und das Bild ist einfach da
Gibt es eine Möglichkeit, das Problem ohne JavaScript zu beheben? Ich kann nur
css und html verwenden
Auch der Z-Index scheint nicht zu funktionieren?
Für mehr Kontext funktioniert es Das sieht nicht so aus, wenn ich das Headerbild nicht
Mit

Ohne Headerbild

Code: Select all

* {
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;

}

Code: Select all

[*]






[/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]