Question

这是我的html：

<div class="showcase">
      <div class="overlay">
        <div class="container">
          <h1>Мышонок</h1>
          <!-- Hamburger -->
          <div class="menu-wrap">
            <input type="checkbox" class="toggler" />
            <div class="hamburger"><div></div></div>
            <div class="menu">
              <div>
                <div>
                  <ul>
                    <li><a href="personal.html">Personal</a></li>
                    <li><a href="men.html">Men</a></li>
                    <li><a href="women.html">Women</a></li>
                    <li><a href="video.html">Video</a></li>
                    <li><a href="about.html">About</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

这是我的CSS：

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  font-family: "Oswald", sans-serif;
}

img {
  width: 100%;
  height: auto;
}

/* Utility */
.container {
  margin: 0 auto;
  max-width: 1160px;
  padding: 0 20px;
  overflow: hidden;
}

.overlay {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.hidden {
  display: none;
}

/* Home */
.showcase {
  position: relative;
  height: 100vh;

  background-image: url(../img/homebg/bg1.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  animation: slide 18s infinite;
  transition: 100ms ease-in-out;
}

.showcase h1 {
  font-size: 4rem;
  font-weight: 500;
  color: #fff;
  padding-top: 40px;
  text-transform: uppercase;
  z-index: 1;
}

@keyframes slide {
  0% {
    background-image: url(../img/homebg/bg1.jpg);
  }

  20% {
    background-image: url(../img/homebg/bg2.jpg);
  }
  40% {
    background-image: url(../img/homebg/bg3.jpg);
  }
  60% {
    background-image: url(../img/homebg/bg4.jpg);
  }
  80% {
    background-image: url(../img/homebg/bg5.jpg);
  }
  100% {
    background-image: url(../img/homebg/bg1.jpg);
  }
}

这是我用于汉堡菜单样式的其他CSS：

.menu-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}

.menu-wrap .toggler {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  width: 50px;
  height: 50px;
  opacity: 0;
}

.menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 60px;
  height: 60px;
  padding: 1rem;
  /* background: rgba(0, 0, 0, 0.5); */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hamburger Icon */
.menu-wrap .hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -10px;
  width: 100%;
  height: 2px;
  background: inherit;
}

.menu-wrap .hamburger > div::after {
  top: 10px;
}

/* Toggler Animation */
.menu-wrap .toggler:checked + .haumburger > div {
  transform: rotate(135deg);
}

问题：我无法切换检查输入按钮。我看着检查器，它应该位于左上角，但是我无法检查它。这是无法检查的。我在这里做错了什么？我需要使用“ toggler”类切换输入复选框，但它只是不检查..？请帮忙

P.S。我认为它必须与我的覆盖物有关。有人可以检查吗？因为我不明白什么可能是错的

Answer 1

所以，我搞砸了z-index。

为了使复选框正常工作，正确的z索引是：

.menu-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
}

.menu-wrap .toggler {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1002;
  cursor: pointer;
  width: 50px;
  height: 50px;
  opacity: 0;
}

.menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1001;
  width: 60px;
  height: 60px;
  padding: 1rem;
  /* background: rgba(0, 0, 0, 0.5); */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hamburger Icon */
.menu-wrap .hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -10px;
  width: 100%;
  height: 2px;
  background: inherit;
}

.menu-wrap .hamburger > div::after {
  top: 10px;
}

/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
  transform: rotate(135deg);
}

如何切换输入复选框？

1 个答案: