html - 如何从导航菜单中隐藏横幅文本？

Question

您好，我有一个横幅文字，每次都显示，即使我按下导航菜单移动它也不会隐藏。

我尝试在横幅文本 div 上设置相对位置，但它仍然显示我的文本...

我的 CSS

.banner {
  background-image: url(../images/banner1.webp);
  /*imagen de fondo banner*/
  background-size: cover;
  /*la imagen se expande a la pantalla*/
  min-height: 100vh;
  /*altura del 100 del viewport del dispositivo*/
  background-color: rgb(30, 30, 30);
  /*color de fondo*/
  background-blend-mode: soft-light;
  /*propiedad de color*/
  animation: banner 25s infinite linear;
  /*animación que llama a banner, 25seg, infinito */
}

.banner .banner-text {
  width: 100%;
  height: 80px;
  font-weight: bold;
  color: white;
  display: flex;
  justify-content: center;
  line-height: 80px;
  font-size: 60px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow: hidden;
}

正如我之前所说，我尝试将相对位置 / z-index 添加到横幅文本，但它一直显示在移动菜单上方

@media (max-width: 1024px){
    .banner .banner-text{
        font-size: 36px;
        position: relative;
     }
}

这是我的整个 CSS https://pastebin.com/zMgZ9S2Y

标签： htmlcss

Answer 1

您可以尝试在移动视图中设置较低的 z-index 值。

@media (max-width: 1024px){
  .banner .banner-text{
  font-size: 36px;
  position: relative;
  z-index: -1;
 }
}

并且这个 z-index 值应该小于导航菜单元素。