Z索引和汉堡菜单

Question

 body { background-color: #313449; font-family: 'Open Sans', sans-serif; } #menu-toggle { z-index: 1; } /* Hidden Checkbox */ #menu-toggle input { opacity: 0; width: 40px; height: 40px; z-index: 2; /* checkbox on top */ position: absolute; top: 0; left: 0; } #menu-toggle input:checked { transition: all 0.3s ease; } /* Hamburger */ #menu-toggle span { display: block; width: 30px; border: #ffffff 2px solid; margin-top: 5px; border-radius: 2px; transition: all 0.3s ease; transform-origin: 0 0; } #menu-toggle input:checked ~ span { /* all bars - top bar */ transform: rotate(45deg) translate(-1px, -3px); border-color: #000000; } #menu-toggle input:checked ~ span:nth-child(3) { /* middle bar */ transform: scale(0, 0); opacity: 0; } #menu-toggle input ~ span:nth-child(4) { /* bottom bar */ transform-origin: 0 100%; } #menu-toggle input:checked ~ span:nth-child(4) { transform: rotate(-45deg) translate(0, 2px); } /* Menu Content */ #menu-toggle input:checked ~ #menu { /* display menu */ left: 0; } #menu-toggle #menu { background-color: grey; background-color: rgba(255, 255, 255, 1); width: 100px; height: auto; padding: 30px 30px; text-align: center; position: absolute; top: 0; left: -160px; margin-top: 0; transition: all 0.3s ease; } #menu-toggle li { list-style: none; margin: 30px 0; } #menu-toggle a li { color: #000000; text-decoration: none; transition: color 0.3s ease; } #menu-toggle a li:hover { color: red; transition: color 0.3s ease; } 

 <nav role="navigation"> <div id="menu-toggle"> <input type="checkbox" /> <span></span> <span></span> <span></span> <ul id="menu"> <a href="#"> <li>Home</li> </a> <a href="#"> <li>Contact</li> </a> <a href="#"> <li>Sign in</li> </a> </ul> </div> </nav> <section> <h1>Title</h1> <p> Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nam commodo suscipit quam. Donec sodales sagittis magna. <br /> <br />Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Donec vitae sapien ut libero venenatis faucibus. In hac habitasse platea dictumst. <br /> <br />Cras ultricies mi eu turpis hendrerit fringilla. Morbi mollis tellus ac sapien. Nam commodo suscipit quam. <br /> <br />Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Phasellus magna. Phasellus nec sem in justo pellentesque facilisis. </p> </section> 

Hi,

I am struggling with my burger menu. It is hidden under my #menu div and I cannot find why. I tried z-index to my spans but it is not working.

What am I doing wrong here?

I also cannot understand why my 2 span and my third span are nth-child(3) and (4)? It is working like this but I cannot figure out why it's not (2) and (3).

Thanks;

Answer 1

add position:relative and z-index:1 to your span.

 body { background-color: #313449; font-family: 'Open Sans', sans-serif; } #menu-toggle { z-index: 1; } /* Hidden Checkbox */ #menu-toggle input { opacity: 0; width: 40px; height: 40px; z-index: 2; /* checkbox on top */ position: absolute; top: 0; left: 0; } #menu-toggle input:checked { transition: all 0.3s ease; } /* Hamburger */ #menu-toggle span { display: block; width: 30px; border: #ffffff 2px solid; margin-top: 5px; border-radius: 2px; transition: all 0.3s ease; transform-origin: 0 0; position:relative; z-index:1; } #menu-toggle input:checked ~ span { /* all bars - top bar */ transform: rotate(45deg) translate(-1px, -3px); border-color: #000000; } #menu-toggle input:checked ~ span:nth-child(3) { /* middle bar */ transform: scale(0, 0); opacity: 0; } #menu-toggle input ~ span:nth-child(4) { /* bottom bar */ transform-origin: 0 100%; } #menu-toggle input:checked ~ span:nth-child(4) { transform: rotate(-45deg) translate(0, 2px); } /* Menu Content */ #menu-toggle input:checked ~ #menu { /* display menu */ left: 0; } #menu-toggle #menu { background-color: grey; background-color: rgba(255, 255, 255, 1); width: 100px; height: auto; padding: 30px 30px; text-align: center; position: absolute; top: 0; left: -160px; margin-top: 0; transition: all 0.3s ease; } #menu-toggle li { list-style: none; margin: 30px 0; } #menu-toggle a li { color: #000000; text-decoration: none; transition: color 0.3s ease; } #menu-toggle a li:hover { color: red; transition: color 0.3s ease; } 

 <nav role="navigation"> <div id="menu-toggle"> <input type="checkbox" /> <span></span> <span></span> <span></span> <ul id="menu"> <a href="#"> <li>Home</li> </a> <a href="#"> <li>Contact</li> </a> <a href="#"> <li>Sign in</li> </a> </ul> </div> </nav> <section> <h1>Title</h1> <p> Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nam commodo suscipit quam. Donec sodales sagittis magna. <br /> <br />Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Donec vitae sapien ut libero venenatis faucibus. In hac habitasse platea dictumst. <br /> <br />Cras ultricies mi eu turpis hendrerit fringilla. Morbi mollis tellus ac sapien. Nam commodo suscipit quam. <br /> <br />Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Phasellus magna. Phasellus nec sem in justo pellentesque facilisis. </p> </section>