侧边栏卡在内容下方

Question

我尝试创建响应式菜单，在调整大小（<992px）后创建将从右侧滚动的汉堡菜单，它将位于网站高度的 100vh。 一切正常，但网站内容在转换后位于侧边栏菜单的顶部。 我试图将 position 设置为绝对或相对无效。 我还尝试在检查 label 后隐藏内容，但它也没有用。 任何想法我该如何解决？

代码：

 /* 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 ：

.menu-items ul {
  float: right;
   /* Insert this line */
}

z-index CSS 属性设置定位元素及其后代或弹性项目的 z 顺序。 具有较大 z-index 的重叠元素会覆盖具有较小 z-index 的元素。

资料来源： MDN

 /* 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; z-index: 999; }.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 2

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