如何使我的汉堡菜单图标位于横幅图像上方？

Question

我在使汉堡包图标位于横幅图像上时遇到问题。 我试过调整z-index，将nav background-color设置为透明，并将背景图像放置在标题中，而不是横幅部分中。 我不知道还要采取什么其他步骤。 任何建议将不胜感激。

 function openNav() { document.getElementById("main-nav").style.height = "100%"; } function closeNav() { document.getElementById("main-nav").style.height = "0%"; } 

 /*Nav*/ header { background-color: transparent; } .overlay { height: 0%; width: 100%; position: fixed; z-index: 1; top: 0; left: 0; background-color: #567E3A; overflow-y: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #fff; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #7F8C8D; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } .burger { font-size: 2em; cursor: pointer; } /*Banner*/ #banner { background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/c_scale,w_2000/v1521182602/camp3_xhp0d9.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; height: 100vh; width: 100%; display: grid; } .banner-text { margin: auto; text-align: center; color: #fff; } .banner-text h1 { margin: 2em 1.4em 1.4em 1.4em; font-size: 2em; line-height: 1.8; color: #fff; text-shadow: 3px 3px #000; } 

 <header> <nav id="main-nav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="overlay-content"> <a href="#">Destinations</a> <a href="#">Accomidation</a> <a href="#">Stories</a> <a href="#">Contact</a> </div> </nav> <span class="burger" onclick="openNav()">&#9776;</span> </header> <section id="banner"> <div class="banner-text"> <h1>Lorem Lipsum</h1> <a href="#" class="btn">Book Today</a> </div> </section> 

Answer 1

像这样？

 function openNav() { document.getElementById("main-nav").style.height = "100%"; } function closeNav() { document.getElementById("main-nav").style.height = "0%"; } 

 /*Nav*/ header { background-color: transparent; } .overlay { height: 0%; width: 100%; position: fixed; z-index: 1; top: 0; left: 0; background-color: #567E3A; overflow-y: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #fff; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #7F8C8D; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } .burger { font-size: 2em; cursor: pointer; position: absolute; } /*Banner*/ #banner { background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/c_scale,w_2000/v1521182602/camp3_xhp0d9.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; height: 100vh; width: 100%; display: grid; } .banner-text { margin: auto; text-align: center; color: #fff; } .banner-text h1 { margin: 2em 1.4em 1.4em 1.4em; font-size: 2em; line-height: 1.8; color: #fff; text-shadow: 3px 3px #000; } 

 <header> <nav id="main-nav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="overlay-content"> <a href="#">Destinations</a> <a href="#">Accomidation</a> <a href="#">Stories</a> <a href="#">Contact</a> </div> </nav> <span class="burger" onclick="openNav()">&#9776;</span> </header> <section id="banner"> <div class="banner-text"> <h1>Lorem Lipsum</h1> <a href="#" class="btn">Book Today</a> </div> </section> 

关于我在这里所做的事情的一些解释（假定这是您要寻找的处理方法）：通过将汉堡包定位为absolute ，我们将其完全从静态布局流程中拉出，因此其他元素在定位时会忽略其存在。 然后可以使用left ， right ， top和bottom来控制元素的位置，并将其相对于绝对放置的第一个祖先元素或相对于没有绝对放置的body定位。 您可能需要考虑使用这些属性来稍微定位一下，因为您可能不想依靠浏览器来使用默认值来计算其位置。

Answer 2

 function openNav() { document.getElementById("main-nav").style.height = "100%"; } function closeNav() { document.getElementById("main-nav").style.height = "0%"; } 

 /*Nav*/ header { background-color: transparent; position: absolute; } .overlay { height: 0%; width: 100%; position: fixed; z-index: 1; top: 0; left: 0; background-color: #567E3A; overflow-y: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #fff; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #7F8C8D; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } .burger { font-size: 2em; cursor: pointer; } /*Banner*/ #banner { background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/c_scale,w_2000/v1521182602/camp3_xhp0d9.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; height: 100vh; width: 100%; display: grid; } .banner-text { margin: auto; text-align: center; color: #fff; } .banner-text h1 { margin: 2em 1.4em 1.4em 1.4em; font-size: 2em; line-height: 1.8; color: #fff; text-shadow: 3px 3px #000; } 

 <header> <nav id="main-nav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="overlay-content"> <a href="#">Destinations</a> <a href="#">Accomidation</a> <a href="#">Stories</a> <a href="#">Contact</a> </div> </nav> <span class="burger" onclick="openNav()">&#9776;</span> </header> <section id="banner"> <div class="banner-text"> <h1>Lorem Lipsum</h1> <a href="#" class="btn">Book Today</a> </div> </section>