Question

你好，当我从笔记本电脑或其他设备上看时，我在显示菜单栏时遇到了一些问题，我想知道是否有人可以帮助我！问题是每当我向下滚动到幻灯片放映或视频我的菜单栏在幻灯片放映或视频后面消失的位置。我想你尝试的时候会完全理解它。

  <!--JavaScript-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
  <script type="text/javascript">
  	$(window).on('scroll', function() {
  if ($(window).scrollTop()) {
    $('nav').addClass('black');
  } else {
    $('nav').removeClass('black');
  }
});

function toggleMenu(x) {
  x.classList.toggle('openMenu');
}
	</script>

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}


/*Menu Bar*/

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 0 100px;
  transition: all 300ms;
}

nav.black {
  background: rgba(0, 0, 0, 0.8);
}

nav .logo {
  display: inline-block;
  width: 25%;
  padding: 0 5px;
  line-height: 80px;
  font-size: 24px;
  transition: all 0.3s;
  text-align: center;
}

nav.black .logo {
  color: #fff;
}

nav a {
  display: inline-block;
  width: 12.5%;
  line-height: 80px;
  color: #151515;
  padding: 0 5px;
  text-decoration: none;
  text-transform: uppercase;
  transition: .3s;
  text-align: center;
  vertical-align: top;
}

nav.black a {
  color: #fefefe;
}

nav a:focus {
  outline: none;
}

nav a.active {
  background: #E2472F;
  color: #fff;
  border-radius: 6px;
}


section.sec1 {
  width: 100%;
  height: 100vh;
  background: url(img/lol.jpg);
  background-size: cover;
  background-position: center;
}



/* Hamburger icon */

.hamburger {
  display: none;
  cursor: pointer;
}

.hamburger .bar1,
.hamburger .bar2,
.hamburger .bar3 {
  width: 35px;
  height: 5px;
  background-color: #fefefe;
  margin: 6px 0;
  transition: all 0.4s;
}

.openMenu .hamburger .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.openMenu .hamburger .bar2 {
  opacity: 0;
}

.openMenu .hamburger .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}


/*Media*/

@media(max-width: 860px) {
  nav {
    background: rgba(0, 0, 0, 0.8);
    padding: 0 20px;
    color: #fefefe;
    overflow: hidden;
  }
  .logo {
    position: fixed;
    top: 0;
  }
  nav a {
    width: 100%;
    line-height: calc((100vh - 80px) / 6);
    transform: translateY(80px);
    visibility: hidden;
  }
  .openMenu a {
    color: #fefefe;
    visibility: visible;
  }
  .hamburger {
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .openMenu {
    height: 100vh;
  }

  .slider {
    width: 100%;
    height: 23%;
  }
  section.sec1 {
    width: 100%;
    height: 30%;
  }
  article#video{
    width: 100%;
  }
  video{
    width: 100%;
  }
  aside{
   border-bottom:#e8491d 3px solid;
   width: 100%;
   height: 250px;
}
aside#welcometext{
  font-family: cursive;
  width: 100%;
  height: 76%;
}
aside#New{
  font-family: serif;
  height: 100%;
  width: 100%;
}
}


/*Slideshow*/
*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  }

.slider {
  overflow: hidden;
  height: 450px%;
}

.slider figure div{
  width: 20%;
  float: left;
}

.slider figure img{
  width: 100%;
  float: left;
}

.slider figure{
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  animation: 25s slidy infinite;
}

@keyframes slidy{
   0% {
      left: 0%;
   }
   10% {
      left: 0%;
   }
   12% {
      left: -100%; 
   }
   22% {
      left: -100%; 
    }
   24% {
      left: -200%;
   }
   34% {
      left: -200%;
   }
   36% {
      left: -300%;
   }
   46% {
      left: -300%;
   }
   48% {
      left: -400%;
   }
   58% {
      left: -400%;
   }
   60% {
      left: -300%;
   }
   70% {
      left: -300%;
   }
   72% {
      left: -200%;
   }
   82% {
      left: -200%;
   }
   84% {
      left: -100%;
   }
   94% {
      left: -100%;
   }
   96% {
      left: 0%;
   }
}

/*Welcome*/

article{
  float: left;
  margin: 0 auto;
  width: 23%;
  height: auto;
}

#welcometext{
  float: right:
  margin: 0 auto;
  width: 100%;
  height: auto;
  border-bottom:#e8491d 3px solid;
  height: 38%;
}

#News1{
  margin-left: 5%;
  width: 52%;
  height: 7%;
  display: inline-flex;
}

section.News{
  border-bottom:#e8491d 3px solid;
  height: 100%;
}

aside#New{
  padding: 27%;
  height: 100%;
  width: 100%;
  font-family: cursive;

}

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie-edge">
  <title> Landschaft </title>
  <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
  <link rel="stylesheet" href="https//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">



</head>



<!--Body-->
<body>
  <div class="wrapper">
  <nav>
    <div class="hamburger" onclick="toggleMenu(this.parentNode);">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
    <div class="logo">Landschaft</div><a href="index.html">НАЧАЛО</a
      ><a href="about.html">СЪБИТИЯ</a
      ><a href="index.html">ПЪТЕКИ</a
      ><a href="index.html">ФОРУМ</a
      ><a href="index.html">ВРЪЗКИ</a
      ><a class="active" href="index.html">ВХОД</a>
  </nav>


  <!--Section - Slideshow-->
  <section class="sec1"></section>
  <section class="content">
  	<div class="slider">
  		<figure>
  	<div class="slide">
  		<img src="img/slideshow1.jpg">
  	</div>
  	<div class="slide">
  		<img src="img/slideshow2.jpg">
  	</div>
  	<div class="slide">
  		<img src="img/slideshow3.jpg">
  	</div>
  	  	<div class="slide">
  		<img src="img/slideshow4.jpg">
  	</div>
  	  	<div class="slide">
  		<img src="img/slideshow5.jpg">
  	</div>
  </figure>
  </div>
  </section>


  <!--Section Welcome Video-->
  <section class="Welcome">
    <article id="video">
    <video width="295" height="238" controls autopl>
      <source src="video.mp4" type="video/mp4">
        </video>
    </article>
      <aside id="welcometext">
        <h2><center>Welcome</center></h2>
        <center><p>Lamium (dead-nettles) is a genus of about 40–50 species of flowering plants in the family Lamiaceae,[3] of which it is the type genus. They are all herbaceous plants native to Europe, Asia, and northern Africa, but several have become very successful weeds of crop fields and are now widely naturalised across much of the temperate world.[2][4][5]</p></center>
      </aside>
    </section>

    <!--Section News-->

     <section class="News">
      <article id="News1">
        <img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
        <img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg"> 
        <img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
      </article>
      <aside id="New">
        <p> dsadas das </p>
      </aside>
    </section>




  </div>
</body>
</html>

Answer 1

在nav元素中添加z-index规则解决了我的问题。

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 0 100px;
  transition: all 300ms;
  z-index: 100;
}

Here对这个主题有点了解

Answer 2

为标题/导航提供z-index：

nav {z-index:100}

Z-index将您的内容定位在前后空间中。值越高，元素越接近前面。

MenuBar问题显示css html

2 个答案: