html - Z-索引和汉堡菜单

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）。

谢谢;

最佳答案

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