как я могу сделать меню выше?

Question

У меня проблема с моим веб-сайтом, я сделал свое меню для мобильных устройств, и когда я нажимаю на гамбургер, и меню появляется под описанием обо мне, я пытался поместить в меню больший z-индекс, но это не не работает, я пытался поместить меньший z-index в элемент div с моим именем, но он не работает, здесь это изображение, как показано под меню и кодом div. image

и это код

  <header class="navigatie shadow nav">
    <a href="#" class="navbar-brand logo ">Tudor Alexandru</a>
    <label for="toggle">&#9776;</label>
    <input type="checkbox" id="toggle" />
    <ul class="meniu-navbar ml-auto menu ">
      <li class="link-navbar activat">Home</li>
      <li class="link-navbar">About Me</li>
      <li class="link-navbar">Projects</li>
      <li class="link-navbar">Photoshop Creations</li>
    </ul>
  </header>

  <div class="myname">
    <h1 class="introduce">Let me introduce myself</h1>
    <h5 class="mynameis"><em>My name is</em></h5>
    <h1 class="tudor">TUDOR ALEXANDRU</h1>
    <h5 class="and"><em>and</em></h5>
    <p class="ilike">I like to learn programming</p>
    <button type="button" class="btn btn-primary"><a href="#aboutme">About Me</a></button>
  </div>

.navigatie{
    display: flex;
    flex-direction: row;
    width: 100%;
}

.meniu-navbar{
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    padding-top: 5px;

}
.link-navbar{
    padding: 15px;
    font-size: 1.1rem;
}
.link-navbar:hover{
    color: #280063;

}


.logo{
    color: black;
    margin-left: 76px;
    padding-top: 15px !important;
    font-size: 1.4rem !important;
}

.logo:hover{
    transform: rotate(360deg) !important;
    color: #280063;
}

.activat{
    color: #280063 !important;
}



label{
    margin: 0 40px 0 0;
    font-size: 33px;
    line-height: 70px;
    display: none !important;
}
#toggle{
    display: none;
}
.myname{
    position: absolute;
    top: 180px;
    left: 70px;
}

.introduce{
    font-size: 2.5rem;
}

.mynameis:before{
    content: "< ";
}
.mynameis:after{
    content: " />";
}

.mynameis, .and{
    color: grey;
}

.and:before{
    content: "< ";
}
.and:after{
    content: " />";
}

.ilike{
    font-size: 1.4rem;
}

Answer 1

Установите свойство background-color класса .navigate на белый. Навигатор прозрачен, поэтому настройка z-index не будет работать в одиночку.