页面的下一部分总是出现在第一部分的顶部答案

【问题标题】：The next section of the page always appears on top of the first one页面的下一部分总是出现在第一部分的顶部
【发布时间】：2023-02-03 23:45:58
【问题描述】：

创建一个简单的产品登录页面，我已经完成了网页的第一部分。当我尝试为“为什么和我们一起飞行”写一个新的部分时，理想情况下用户会从第一部分向下滚动到，每个新元素都出现在第一部分的顶部。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.nav-container {
  height: 70px;
  background-color: rgb(0, 221, 221);
}

.navbar {
  display: grid;
  grid-template-columns: 0.2fr auto 1fr;
  align-items: center;
  height: 80px;
  width: 90%;
  max-width: 1720px;
  margin: 0 auto;
}

#navbar-logo {
  color: white;
  justify-self: start;
}

#navbar-logo {
  cursor: pointer
}

.nav-menu {
  display: grid;
  grid-template-columns: repeat(5, auto);
  list-style: none;
  font-size: 1.2rem;
  text-align: center;
  width: 50%;
  justify-self: end;
}

.nav-links {
  color: white
}

.nav-links:hover {
  color: #f9e506;
  transition: all 0.3s ease-out;
}

.nav-links-btn {
  background-color: #f9e506;
  padding: 6px 16px;
  border-radius: 4px;
}

.nav-links-btn:hover {
  background-color: transparent;
  color: white;
  padding: 5px 15px;
  border-radius: 4px;
  border: solid 1px #f9e506;
  transition: all 0.3s ease-out;
}

.container {
  position: fixed;
  top: 38%;
  left: 32%;
  text-align: center;
}

h1 {
  color: white;
  font-size: 5rem;
  margin: 0 0 1rem;
  @media (max-width: $bp-s) {
    font-size: 2rem;
  }
}

h2 {
  color: white;
  font-weight: 300;
  font-size: 2.2rem;
  margin: 0 0 1rem;
  @media (max-width: $bp-s) {
    font-size: 1.5rem;
  }
}

h3 {
  color: white;
  font-weight: 300;
  font-size: 2.5rem;
  margin: 0 0 1rem;
  @media (max-width: $bp-s) {
    font-size: 1.5rem;
  }
}

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  background-image: url("61766.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Heebo', sans-serif;
  font-size: 100%;
  line-height: 1.45;
}

.btn {
  width: 300px;
  height: 80px;
  border: none;
  color: aqua;
  background-color: #04d9ff;
  border-radius: 4px;
  box-shadow: inset 0 0 0 0 #f9e506;
  transition: ease-out 0.3s;
  font-size: 2rem;
  outline: none;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
  color: white;
}

.btn:hover {
  box-shadow: inset 300px 0 0 0 #f9e506;
  cursor: pointer;
  color: #000;
}

.description {
  background-color: aliceblue;
}

<body>
  <header>
    <div class="nav-container">
      <nav class="navbar">
        <h3 id="navbar-logo">iTravel</h3>
        <div class="menu-toggle" id="mobile-menu">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </div>
        <ul class="nav-menu">
          <li><a href="#" class="nav-links">Home</a></li>
          <li><a href="#" class="nav-links">Flights</a></li>
          <li><a href="#" class="nav-links">Hotels</a></li>
          <li><a href="#" class="nav-links">My Bookings</a></li>
          <li><a href="#" class="nav-links nav-links-btn">Log In</a></li>
        </ul>
      </nav>
    </div>
    <div class="container">
      <h1>iTravel</h1>
      <h2>Travelling has never been easier</h2>
      <button class="btn"><a href="#">Book Flights Now</a></button>
    </div>
  </header>

  <div>
    <section class="description">
      <h4>Why fly with us?</h4>
      <p>A travel agency like ours offers a one-stop solution for all your travel needs. From finding the perfect destination to planning..
      </p>
    </section>
  </div>
</body>

我以为我可能没有关闭 html 标签，但我已经彻底检查过，事实并非如此。我试过将下一部分放在 div 中，我也试过使用 section 标签，但两次尝试都产生了相同的结果。我检查了 CSS，尤其是 html 和 body 选择器，甚至调整了一些值，但无济于事。我怀疑我遗漏了一个非常微小的细节，希望更敏锐、更有经验的眼睛能提供帮助。

【问题讨论】：

你能澄清一下问题是什么吗
您的容器是 position: fixed - 我不知道为什么会这样，我认为您需要从这里开始。

标签： html css

【解决方案1】：

我认为这可能是您想要完成的。基本上，如果您将每个“部分”包装在一个绝对定位的容器中（我使用了section），然后在每个部分中都有一个固定位置的容器，您就可以实现视差滚动效果。假设每个部分是 100vh，诀窍是每个容器需要将其 top 属性设置为 100vh + 上一节的 top 属性（所以第一个是 0，第二个是 100vh，第三个是 200vh ...）。此外，每个连续的部分都需要更高的z-index。

运行下面的 sn-p 并以全屏模式打开它进行测试。

/* GLOBAL STYLES */

:root {
 --navBarHeight: 3.5rem;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100%;
  background-image: url("61766.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Heebo', sans-serif;
  font-size: 100%;
  line-height: 1.45;
}

h1 {
  font-size: 5rem;
}

h2 {
  font-weight: 300;
  font-size: 2.2rem;
}

h3 {
  font-weight: 300;
  font-size: 2.5rem;
}

a {
  color: inherit;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
  color: white;
}

/* NAVBAR STYLES */

.nav-container {
  color: white;
  background-color: rgb(0, 221, 221);
  position: fixed;
  width: 100%;
  z-index: 1000;
  height: var(--navBarHeight);
  padding: 0 1rem;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#navbar-logo {
  cursor: pointer;
}

.nav-menu {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: .5rem;
}

.nav-links:hover {
  color: #f9e506;
  transition: all 0.3s ease-out;
}

.nav-links-btn {
  background-color: #f9e506;
  padding: 6px 16px;
  border-radius: 4px;
}

.nav-links-btn:hover {
  background-color: transparent;
  color: white;
  padding: 5px 15px;
  border-radius: 4px;
  border: solid 1px #f9e506;
  transition: all 0.3s ease-out;
}

/* MAIN STYLES: PARALLAX SECTIONS */

main {
  position: relative;
}

section {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  clip: rect(0, auto, auto, 0);
  padding: 1rem;
  padding-top: calc(1rem + var(--navBarHeight));
  box-shadow: inset 0 1px 2rem hsl(0 0% 0% / .05);
  background-color: white;
}

.fixed {
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

section:nth-child(1) {
  top: 0;
  z-index: 1;
}

section:nth-child(2) {
  top: 100vh;
  z-index: 2;
}

section:nth-child(3) {
  top: 200vh;
  z-index: 3;
}

section:nth-child(4) {
  top: 300vh;
  z-index: 4;
}

.booknow {
  background-color: white;
}

.description {
  background-color: lightcyan;
}

.findDeals {
  background-color: white;
}

.explore {
  background-color: lightyellow;
}

.btn {
  width: 300px;
  height: 80px;
  border: none;
  color: aqua;
  background-color: #04d9ff;
  border-radius: 4px;
  box-shadow: inset 0 0 0 0 #f9e506;
  transition: ease-out 0.3s;
  font-size: 2rem;
  outline: none;
}

.btn:hover {
  box-shadow: inset 300px 0 0 0 #f9e506;
  cursor: pointer;
  color: #000;
}

  <header>
    <div class="nav-container">
      <nav class="navbar">
        <h3 id="navbar-logo">iTravel</h3>
        <div class="menu-toggle" id="mobile-menu">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </div>
        <ul class="nav-menu">
          <li><a href="#" class="nav-links">Home</a></li>
          <li><a href="#" class="nav-links">Flights</a></li>
          <li><a href="#" class="nav-links">Hotels</a></li>
          <li><a href="#" class="nav-links">My Bookings</a></li>
          <li><a href="#" class="nav-links nav-links-btn">Log In</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main>
    <section class="booknow">
      <div class="fixed">
        <h1>iTravel</h1>
        <h2>Travelling has never been easier</h2>
        <button class="btn"><a href="#">Book Flights Now</a></button>
      </div>
    </section>
    <section class="description">
      <div class="fixed">
        <h4>Why fly with us?</h4>
        <p>A travel agency like ours offers a one-stop solution for all your travel needs. From finding the perfect destination to planning...</p>
      </div>
    </section>
    <section class="findDeals">
     <div class="fixed">
       <h4>Check out these deals!</h4>
     </div>
    </section>
    <section class="explore">
     <div class="fixed">
       <h4>Explore destinations</h4>
     </div>
    </section>
  </main>

【讨论】：

【解决方案2】：

这里的主要问题是用于第一个元素 (.container) 的定位。使用position: absolute & position: fixed，元素从文档的正常流中移除。

换句话说，它们在布局计算期间不占用空间，因此在放置正常文档流中的元素时会被忽略。

【讨论】：

哦，你是对的，非常感谢！作为定位 (.container) 的更好方法，您有什么建议？