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

Question

我有一个奇怪的问题。

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

我想要固定栏以使其保持可见，但是当我这样做时它就消失了。

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

有人提出解决方案，让酒吧保持原样？

图像 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%);
      
    }

Answer 1

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

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