侧边栏卡在内容下面。

Question

我尝试创建响应菜单，在调整大小(<992px)之后，创建从右侧滚动的汉堡包菜单，它将位于网站高度的100‘s上。所有的工作，但网站的内容是顶部的侧边栏菜单后，过渡。我试着把这个位置设置为绝对的或相对的，没有什么是可行的。另外，我试图隐藏标签检查后的内容，但它也没有工作。我怎么才能解决这个问题？

代码：

​

/* General */

html,
body {
  height: 100%;
  font-size: 100%;
  font-family: 'Montserrat', sans-serif;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

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

.wrapper {
  min-height: 100%;
}

.container {
  position: relative;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}

.main-content {
  padding-top: 20px;
  padding-bottom: 50px;
}

footer {
  height: 50px;
  margin-top: -50px;
  background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73);
}


/* Menu */

.menu {
  width: 100%;
  height: 58px;
}

.menu-items ul {
  float: right;
}

.menu-items ul li {
  display: inline;
  padding: 20px;
  list-style: none;
}

.menu-items ul li a {
  line-height: 75px;
  font-weight: 300;
  color: #000;
  text-decoration: none;
}

.menu-items ul li a:hover {
  color: #4956cc;
  transition: 0.1s
}

.menu-items ul li a.active {
  color: #ffa136;
}

.logo-place {
  line-height: 75px;
  display: inline;
  float: left;
}

.checkbtn {
  font-size: 30px;
  color: #000;
  float: right;
  line-height: 85px;
  cursor: pointer;
  display: none;
}

#check {
  display: none;
}

@media (max-width:992px) {
  .checkbtn {
    display: block;
  }
  .menu-items ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 80px;
    right: -100%;
    background: #000;
    text-align: center;
    transition: all .5s;
  }
  .menu-items ul li {
    display: block;
    margin-top: 10px;
  }
  .menu-items ul li a {
    font-size: 20px;
    color: #fff;
  }
  #check:checked~.menu-items ul {
    right: 0;
  }
}


/* Welcome-section */

.welcome-section {
  background-color: red;
}

.welcome-section h1 {
  color: #fff;
}

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<div class="wrapper">

  <div class="menu container">
    <input type="checkbox" id="check">
    <label for="check" class="checkbtn">
          <i class="fas fa-bars"></i>
        </label>
    <div class="logo-place">
      <a href="index.html"><img src="img/logo.png" alt=""></a>
    </div>

    <div class="menu-items">
      <ul>
        <li><a class="active" href="index.html">My Story</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="https://www.instagram.com/" target="_blank">Instagram</a></li>
        <li><a href="https://www.linkedin.com/" target="_blank">Linkedin</a></li>
      </ul>
    </div>
  </div>

  <div class="main-content">
    <div class="welcome-section">
      <div class="container">
        <div class="portrait">
          <img src="img/portrait.png" alt="">
        </div>
        <h1>bla bla bla bla bla <br> bla bla bla.</h1>
      </div>
    </div>
  </div>
</div>

<footer></footer>

​

Answer 1

将z-index: 9;添加到@media (max-width:992px)中的.menu-items ul中