Как мне предотвратить перекрытие изображения заголовка панели навигации, используя только html и css? ⇐ Html

[Anonymous]

(да, я знаю, что это не мой код, но это был урок на YouTube, и я очень плохо разбираюсь в кодировании)
поэтому панель навигации опускается вниз и изображение вот
вот о чем я говорю:
есть ли способ исправить это без Java, я могу использовать только
css и html
а также индекс z не работает???
Я действительно новичок в этом, и мне нужно
также для большего контекста, это не выглядит так, когда я не помещаю изображение заголовка с изображением заголовка без изображения заголовка
помощь от вас
мне очень нужна помощь, это 90% моей оценки, пожалуйста
вот код
html:

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

balls
[*]




[i]

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

css:

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

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

}

• это все спасибо, я с радостью приму любую критику

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