主屏幕卡在页面顶部后的新 HTML 部分

如何解决主屏幕卡在页面顶部后的新 HTML 部分

我为一个网站创建了一个整页视频背景主屏幕，我想在主页下方添加下一个“关于”部分，但是，关于部分被粘在网站的顶部，我想不通为什么。我希望视频背景保持固定，以便覆盖整个网站，我还有一个带有菜单选项的侧边栏，所以我相信我在某个地方的定位出错了。

@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;
}

它会修复它，如果您必须将案例显示为绝对，那么您可以这样做

#about {
  position:absolute;
  top:100vh;
  width:100vw;
}