显示 css html 的 MenuBar 问题

Question

Hello I have some problems on showing my menu bar when I am looking it from laptop or other devices and I was wondering if someone can help me!您好，当我从笔记本电脑或其他设备上查看菜单栏时，我在显示菜单栏时遇到了一些问题，我想知道是否有人可以帮助我！ The problem is whenever I scroll down to the slideshow or where is the video my menu bar disappear behind the slideshow or the video.问题是每当我向下滚动到幻灯片或视频在哪里时，我的菜单栏就会消失在幻灯片或视频后面。 I think you will understand it perfectly when you try it.我想当你尝试它时你会完全理解它。

 <!--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

Adding a z-index rule to your nav element solved the problem on my end.向您的导航元素添加z-index规则解决了我的问题。

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

Here is a little read on the subject这是关于这个主题的一些阅读

Answer 2

Give your header/nav a z-index:给你的标题/导航一个 z-index：

nav {z-index:100}

Z-index positions your content in front-back space. Z-index 将您的内容定位在前后空间中。 The higher the value the closer to the front the element will be.值越高，元素越靠近前面。

显示 css html 的 MenuBar 问题

问题描述

2 个解决方案

解决方案1
1 2018-02-11 20:05:31

解决方案2
0 2018-02-11 20:07:54

显示 css html 的 MenuBar 问题

问题描述

2 个解决方案

解决方案1 1 2018-02-11 20:05:31

解决方案2 0 2018-02-11 20:07:54

解决方案1
1 2018-02-11 20:05:31

解决方案2
0 2018-02-11 20:07:54