我已经为一个网站创建了一个完整的视频背景主屏幕，我想添加下一节"About"然而，在主页下方，"关于"部分被粘在了网站的顶部，我不知道为什么。我想视频背景保持固定，所以它涵盖了整个网站，我也有一个侧边栏，弹出菜单选项，所以我相信我是错的地方与它所有的定位。
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;700&family=Oxygen:wght@300;400;700&family=Space+Grotesk:wght@300;400;500;700');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700');
:root {
--overlay-color: rgb(105, 104, 104);
--font-secondary: 'Oxygen', sans-serif;
--font-primary: 'Space Grotesk', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Oswald', sans-serif;
}
.showcase {
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
color: #fff;
z-index: 2;
transition: 0.5s;
}
.showcase.active {
right: 300px;
}
.showcase header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo-container {
cursor: pointer;
position: relative;
left: -40px;
}
.logo {
width: 100px;
cursor: pointer;
}
.toggle {
position: relative;
width: 60px;
height: 60px;
background: url('images/menu.png');
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
right: -40px;
}
.toggle.active {
background: url('images/close.png');
filter: invert(1);
background-repeat: no-repeat;
background-size: 20px;
background-position: center;
}
.showcase video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--overlay-color);
mix-blend-mode: overlay;
}
.text {
position: relative;
z-index: 10;
margin: 0 auto;
}
.text h2 {
font-size: 5.5em;
font-weight: 700;
line-height: 1.1em;
text-transform: uppercase;
text-align: center;
z-index: 10;
}
.text p {
font-size: 1.2em;
margin-top: 30px;
font-weight: 300;
max-width: 700px;
font-family: var(--font-primary);
text-align: center;
line-height: 1.5em;
width: 490px;
}
.contact-container {
position: fixed;
bottom: 30px;
text-transform: uppercase;
color: #fff;
z-index: 10;
left: 75px;
font-size: 1.03em;
letter-spacing: 2px;
}
.contact-container a {
font-family: var(--font-primary);
text-decoration: none;
color: #fff;
}
.cool-link::after {
content: '';
display: block;
width: 0;
margin-top: 2px;
height: 2px;
background: #fff;
transition: width .3s;
}
.cool-link:hover::after {
width: 100%;
transition: width .3s;
}
/* SOCIAL ICONS */
.social {
position: fixed;
bottom: 18px;
right: 40px;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
.social li {
list-style: none;
}
.social-icon {
display: inline-block;
transform: scale(0.5);
margin-right: 25px;
transition: 0.5s;
font-size: 40px;
cursor: pointer;
}
.social-icon.active {
color: black;
}
.social-icon:hover {
transform: scale(0.5) translateY(-15px)
}
.menu {
position: absolute;
top: 0;
right: 0;
width: 300px;
/* background-color: white;
z-index: 100; */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.menu ul {
position: relative;
list-style: none;
text-align: center;
}
.menu ul li a {
text-decoration: none;
font-size: 25px;
line-height: 2em;
color: #111;
}
.menu ul li a:hover {
color: var(--overlay-color);
}
/* HOME IMAGES */
.images {
position: absolute;
display: flex;
flex-direction: column;
}
.image1 {
position: relative;
top: 210px;
left: 220px;
}
.image1 img {
width: 170px;
opacity: .9;
}
.image2 {
position: relative;
left: 30px;
top: 235px;
}
.image2 img {
width: 300px;
opacity: .9;
}
.image3 {
position: relative;
left: 778px;
top: -255px;
}
.image3 img {
width: 300px;
height: 170px;
opacity: .9;
}
.image4 {
position: relative;
left: 995px;
top: -278px;
}
.image4 img {
width: 170px;
opacity: .9;
height: 230px;
}
/* ABOUT SECTION */
#about {
padding: 40px;
text-align: center;
}
#about p {
font-size: 1.2rem;
max-width: 600px;
margin: auto;
}
#about h2 {
margin: 30px 0;
color: var(--primary-color);
}
.social a {
margin: 0 5px;
}
/* MEDIA QUERIES */
@media(max-width: 798px) {
.showcase,
.showcase header {
padding: 40px;
}
.text h2 {
font-size: 3em;
}
}<script src="https://kit.fontawesome.com/914efae9b6.js" crossorigin="anonymous"></script>
<section class="showcase">
<header>
<div class="logo-container">
<a href="#"><img class="logo" src="/images/logo.png" alt=""></a>
</div>
<div class="toggle"></div>
</header>
<div class="overlay"></div>
<video src="/images/black.mp4" muted loop autoplay></video>
<div class="text">
<h2>Back Your</h2>
<h2>creators</h2>
</div>
<div class="images">
<div class="image1">
<img src="/images/cardmapr-E4s8t8EfDu4-unsplash.jpg" alt="">
</div>
<div class="image2">
<img src="/images/aronpw-0caikkln3Ag-unsplash.jpg" alt="">
</div>
<div class="image3">
<img src="/images/image.png" alt="">
</div>
<div class="image4">
<img src="/images/joshua-rawson-harris-oEEdL2vZKJg-unsplash.jpg" alt="">
</div>
</div>
<ul class="social">
<li class="social-icon"><i class="fab fa-facebook-f"></i></li>
<li class="social-icon"><i class="fab fa-instagram"></i></li>
<li class="social-icon"><i class="fab fa-tiktok"></i></li>
</ul>
<div class="contact-container">
<a class="cool-link" href="#">Contact</a>
</div>
<!-- Scroll arrow -->
<a class="ca3-scroll-down-link ca3-scroll-down-arrow" data-ca3_iconfont="ETmodules" data-ca3_icon=""></a>
</section>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<section id="about">
<h1>About</h1>
<p>
This is a landing page with a full screen video background. This section will be for the about page
</p>
<h2>Follow Me On Social Media</h2>
<div class="social">
<a href="https://twitter.com/" target="_blank"><i class="fab fa-twitter fa-3x"></i></a>
<a href="https://facebook.com/traversymedia" target="_blank"><i class="fab fa-facebook fa-3x"></i></a>
<a href="https://github.com/" target="_blank"><i class="fab fa-github fa-3x"></i></a>
<a href="https://www.linkedin.com/" target="_blank"><i class="fab fa-linkedin fa-3x"></i></a>
</div>
</section>如果有人能指出我错在哪里，提前感谢!
你可以设置为.showcase{ position: relative}，那么它将是这样的:
.showcase {
position: relative
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
color: #fff;
z-index: 2;
transition: 0.5s;
}
它会修复它，如果你必须将show case设置为绝对值，那么你可以使用
#about {
position:absolute;
top:100vh;
width:100vw;
}