有人能帮我解决这个问题吗?当我最小化浏览器时，我的内容是重叠的，以及我如何在点击菜单图标时将侧边栏文本放在中心。
这是我的JSFIDDLE LINK: https://jsfiddle.net/dt6ankop/
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nova+Slim&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nova+Slim&display=swap');
@import url('https://fonts.googleapis.com/css2?family=New+Rocker&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: url('https://images.wallpaperscraft.com/image/neon_art_car_129818_1920x2400.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
min-height: 100vh;
position: relative;
}
nav{
display: flex;
height: 100px;
width: 100%;
background: rgb(17, 17, 17);
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo{
color: #fff;
}
.shadow{
position: relative;
box-shadow: 0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
}
.shadow:before,
.shadow:after{
content: '';
position: absolute;
z-index: -1;
box-shadow: 0 0 40px rgba(0,0,0,0.8);
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
}
nav ul{
display: flex;
flex-wrap: wrap;
list-style-type: none;
}
nav ul li{
margin: 0 5px;
}
nav ul li a{
color: #f2f2f2;
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
border-bottom: 1.5px solid transparent;
transition: all 0.3s ease;
font-family: 'Nova Slim', cursive;
}
nav ul li a:hover{
border-color: rgb(140, 0, 255);
color: rgb(140, 0, 255);
}
nav .menu-btn i{
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
text-align: center;
}
input[type="checkbox"]{
display: none;
}
.home{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
width: 100%;
padding: 0 30px;
color: #fff;
}
@media (max-width:991px){
nav{
padding:0 40px 0px 50px;
}
}
@media (max-width:911px){
nav .menu-btn i{
display: block;
z-index: 999;
}
#click:Checked ~ .menu-btn i:before{
content: 'f00d';
}
nav ul{
position: fixed;
top: 80px;
left: -100%;
background: #111;
height: 100vh;
width: 100%;
text-align: center;
z-index: 10;
display: block;
transition: all 0.3s ease;
}
#click:Checked ~ ul {
left: 0px;
}
nav ul li{
width: 100px;
margin: 40px 0;
}
nav ul li a{
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:Checked ~ ul li a{
margin-left: 0px;
}
}
@media (amx-width:768px){
.content div{
font-size: 22px;
}
}
.home .text-1{
font-size: 27px;
font-weight: 700;
letter-spacing: 5px;
}
.home .text-2{
font-size: 75px;
font-weight: 700;
letter-spacing: 5px;
}
.home .text-3{
font-size: 40px;
font-weight: 700;
letter-spacing: 5px;
}
.home .text-3 span{
color: rgb(98, 0, 255);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="icon" href="https://images.wallpaperscraft.com/image/guy_anime_art_122234_2048x2730.jpg">
<link rel="stylesheet" href="assets/css/style.css">
<title>My Portfolio</title>
</head>
<body>
<nav class="shadow">
<div class="logo"><img class="rounded-circle" src="/assets/img/logo.png" width="100" height="100"></div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="material-icons">menu</i>
</label>
<ul class="menu">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section class="home" id="home">
<div class="max-width">
<div class="text-1">HI, I AM</div>
<div class="text-2">BEAST NECTUS</div>
<div class="text-3">I'M A <span>WEB DESIGNER</span></div>
</div>
<!-- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus enim officiis vel voluptatum maiores itaque ad. Ratione, quia, atque quo dolorum commodi in, sint adipisci dolores aut consequatur laudantium quod dicta illo accusantium doloremque molestias eveniet! Repellat optio cupiditate hic veniam sapiente repellendus quis. Maxime cupiditate totam obcaecati? Voluptates quia aspernatur sequi. Repellat doloremque neque ducimus ipsum nam deserunt alias eius soluta? Accusamus voluptatum, delectus porro repudiandae eveniet, aliquid fugit iusto nostrum error unde, aperiam nihil id iste omnis maiores. Molestias amet asperiores itaque modi magnam, delectus, blanditiis est cupiditate adipisci molestiae recusandae pariatur soluta doloribus minima eaque nesciunt nulla consequuntur, officia libero enim nam voluptatem perferendis ipsum? Laudantium, at aliquam nesciunt voluptatibus et pariatur ducimus, ipsum ex velit facilis quasi natus excepturi deleniti sequi? Possimus voluptas, molestiae consequatur maiores minima vero quas dolore exercitationem deserunt aspernatur dolor, nesciunt doloribus obcaecati dignissimos pariatur dolorem, eaque porro. At, iste explicabo. Ea iste repellat ut ab? Doloremque ea autem distinctio quidem porro, voluptates illo reiciendis! Necessitatibus doloribus deleniti similique fugit nostrum dignissimos consequatur obcaecati molestiae asperiores labore quisquam, exercitationem dolore, reiciendis repudiandae optio dolor! Quaerat eius, eaque autem veritatis, eligendi ipsam sunt earum corporis unde nisi enim aliquid. Dolor consequuntur vel quasi!</p> -->
</body>
</html>你必须使用display flex
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.navbar {
display: flex;
height: 100vh;
width: 10%;
background-color: aquamarine;
justify-content: center;
align-items: center;
transition: 1s ease-in;
}
.navbar:hover {
width: 100%;
}
.navbar:hover li{
width: 100%;
opacity: 1;
}
li {
transition: 1s ease-in;
opacity: 0;
margin-bottom: 30px;
line-height: 10vh;
vertical-align: middle;
}
a {
text-decoration: none;
color: black;
font-size: 20px;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Feedback</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</body>