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> 

你好

我在漢堡菜單上掙扎。 它隱藏在我的#menu div下，我找不到原因。 我嘗試將z-index調整到我的范圍，但無法正常工作。

我在這里做錯了什么？

我也無法理解為什么我的2個跨度和我的第三個跨度分別是nth-child（3）和（4）？ 它是這樣工作的，但我不知道為什么不是（2）和（3）。

謝謝;

Answer 1

在您的跨度中添加position:relative和z-index:1 。

 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>