html - 无法在不隐藏标题的情况下添加幻灯片

Question

我正在尝试通过在顶部显示标题而不褪色来实现幻灯片放映。我无法做到这一点。有人可以帮我更改代码，以便幻灯片在标题下开始吗

这是我的codepen的链接

https://codepen.io/arunkayathi/pen/EbxpEv

#landing-header {
  background-repeat: no-repeat;
  background-size:100%;
  z-index: 1;
  position: relative;
  width:340px;
  height:174px;
  text-align: center;
  margin:0 auto;
  padding-top: 37vh;
}
#landing-content{
  padding:40px 0;
}
#landing-header{
  color:white;
}
.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;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  animation: imageAnimation 50s linear infinite;
}

请点击链接并找到它的完整代码

Answer 1

您只需要在导航元素上添加一个 z-index。

将此添加到您的 CSS 中

nav  {
  z-index:10;
}