如果我在下面添加图片，导航栏就会消失

问题描述

我有一个奇怪的问题。

我页面上的一切都很顺利，我已经准备好了导航栏（也适用于我的手机）。 然后我在导航栏下放了一张照片，导航栏不见了..

我想要固定条形，使其保持可见，但当我这样做时它不见了。

图片应该保持相对，否则如果你调整到手机，这将不再正确。

有人能解决问题吗？

图片 css

    .header{
      max-width: 100%;
      margin-left: 0;
      margin-top: 0;
      position: relative;
      letter-spacing: 4px;
      margin-top: 70px;
      Box-sizing: inherit;
    }
    .header-image{
      max-width: 100%;
      height: auto;  
      border-style: none;
      background-size: cover;
      background-position: center center;
      display: block;
      position: relative;
      Box-sizing: inherit;
    }
    .header-image-tekst{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      Box-sizing: inherit;
      display: block;
      text-align: center!important;
      margin-top: 16px!important;
    }
    .header-image-tekst h1{
      color: white;
      font-size: 38px!important;
      margin: 10% 0;
    }
    .header-image-tekst h1 .border{
      padding: 8px 16px!important;
      background-color: black;
      opacity: 0.75;
    }

导航栏 CSS

    .container{
        margin: 0 auto;
        width: 100%;
        position: fixed;
    }

    .nav{
      border-bottom: 1px solid #EAEAE8;
      text-align: right;
      height: 70px;
      line-height: 70px;
      position: fixed;
    }

    .menu{
      margin: 0 30px 0 0;
    }

    .menu a{
      clear: right;
      text-decoration: none;
      color: #000;
      margin: 0 10px;
      line-height: 70px;
      padding: 20px;
      border-radius: 40px;
    }

    .menu a:hover{
      background-color: #03999e3b;
    }
    label{
      margin: 0 40px 0 0;
      float: right;
      margin: 0 10px;
      line-height: 70px;
      font-size: 26px;
      display: none;
      width: 26px;
      float: right;
      
    }

    #toggle{
      display: none;
    }

    @media only screen and (max-width: 700px){
      label{
        display: block;
        cursor: pointer;
        position: fixed;
      }
      .menu{
        text-align: center;
        width: 100%;
        display: none;
      }
      .menu a{
        display: block;
        border-bottom: 1px solid #03989E;
        margin: 0;
      }
      #toggle:checked + .menu {
        display: block;
        position: fixed;
      }
    }

    .active{
      background-image: linear-gradient(315deg,#ffffff 0%,#03989E 74%);
      
    }

解决方法

据我所知，该图像可能与导航栏重叠。使用导航栏上的 z-index 使其显示在图像顶部。如果您不希望它们重叠，那么您必须调整一些布局 CSS，但这应该可行。我通常会将导航的 z-index 设置为 10，这样它就会始终位于我设置了 z-index 的其他元素的前面。

这是一篇参考文章：https://developer.mozilla.org/en-US/docs/Web/CSS/z-index