css - 页面的导航栏隐藏在幻灯片动画下。如何防止这种情况？我想在顶部单独显示导航栏，动画照常进行

Question

我试过将导航放在单独的 div 中，将幻灯片动画放在其他的 div 中，但仍然无法正常工作这是我的代码，请告诉我该怎么做它只是与我的导航栏重叠。我已经尝试了我能想到的一切，但仍然做不到。

这是html部分

这里是导航栏

    <ul class="slideshow">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

这是CSS

    body {
      background-color: #000;
    }

    #landing-header {
      z-index: 1;
      position: relative;
      text-align: center;
      padding-top: 40vh;
    }

    #landing-header h1 {
      color: #fff;
    }

    .slideshow { 
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 0;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .slideshow li { 
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        z-index: 0;
        animation: imageAnimation 50s linear infinite;
    }


    .slideshow li:nth-child(1) { 
        background-image: url();
    }



    @keyframes imageAnimation { 
      0% { 
        opacity: 0; 
        animation-timing-function: ease-in;
      }
      10% {
        opacity: 1;
        animation-timing-function: ease-out;
      }
      20% {
        opacity: 1
      }
      30% {
        opacity: 0
      }
    }

Answer 1

所以我已经阅读了您需要的内容，但我想获得更多信息或现场演示(如果有的话)。

无论如何，这里有一个简单的解决方案，可以让导航栏粘在所有元素的顶部和前面:

body {
  background-color: #000 !important;
}

ul {
  list-style: none;
  display: inline-flex;
}

ul.slideshow li {
  margin: 0 20px;
}

.slideshow {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 20px;
  background-color: #fff;
  z-index: 10000;
}

p {
  color: #fff;
  margin-left: 20px;
  margin-bottom:30px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>


<ul class="slideshow">
  <li>MENU</li>
  <li>MENU </li>
  <li>MENU</li>
  <li>MENU </li>
  <li>MENU</li>
</ul>

<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>

这是现场演示:https://jsfiddle.net/Devel0per95/wgrsvx7k/11/