CSS：导航栏延迟 div

Question

您好，我刚开始使用 HTML & CSS，目前我正在制作我的第一个网站。我的问题是，当 div（称为开始）设置为相对时，我的导航栏延迟了它下面的 div。我必须滚动才能看到 div 中的完整图像。但是当我将它设置为绝对时，它会完美地将 div 居中，但导航栏不再可见。如果有人能帮助我，我将不胜感激！ HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>RATA</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="icon" href="favicon.ico">
  </head>
  <body>
    <header>
      <img class="Logo" src="images/R-white.png" alt="Skull-Logo">
      <nav>
        <ul class="nav__links">
          <li><a href="#">Roadmap</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">FAQ</a></li>
        </ul>
      </nav>
      <a class="cta" href="#"><button>Mint</button></a>
    </header>
    <div class="Start">
    <img class="background" src="images/RATA-small.svg" alt="RATA">
    </div>
  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

/************** PARAM SELECTORS ******************/

body {
  margin: 0;
}


/*******************CLASS SELECTORS*****************/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #191919;
  z-index: 1;
}

li, a, button {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #edf0f1;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
}

.Logo {
  cursor: pointer;
  height: 100px;
  margin: 0;
}

.nav__links {
  list-style: none;
}

.nav__links li {
  display: inline-block;
  padding: 0px 20px;
}

.nav__links li a {
  transition: all 0.3s ease 0s;
}

.nav__links li a:hover {
  color: #0088a9;
}


.cta button {
  padding: 9px 25px;
  background-color: rgba(0, 136, 169, 1);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

.cta button:hover {
  background-color: rgba(0, 136, 169, 0.8)
}

/**Div**/
.Start {
  position: relative;
  bottom: 0;
  width: 100%;
}

/** Image in Div**/
.background {
  margin-top: 0px;
  bottom: 0;
  position: relative;
  z-index: 0
}

Answer 1

I have to scroll to see the full image in the div.

听起来图片高度对您的屏幕来说太大了，这里我将其设置为 200 像素：

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

/************** PARAM SELECTORS ******************/

body {
  margin: 0;
}


/*******************CLASS SELECTORS*****************/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #191919;
  z-index: 1;
}

li, a, button {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #edf0f1;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
}

.Logo {
  cursor: pointer;
  height: 100px;
  margin: 0;
}

.nav__links {
  list-style: none;
}

.nav__links li {
  display: inline-block;
  padding: 0px 20px;
}

.nav__links li a {
  transition: all 0.3s ease 0s;
}

.nav__links li a:hover {
  color: #0088a9;
}


.cta button {
  padding: 9px 25px;
  background-color: rgba(0, 136, 169, 1);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

.cta button:hover {
  background-color: rgba(0, 136, 169, 0.8)
}

/**Div**/
.Start {
  position: relative;
  bottom: 0;
  width: 100%;

}

/** Image in Div**/
.background {
  margin-top: 0px;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: 200px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>RATA</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="icon" href="favicon.ico">
  </head>
  <body>
    <header>
      <img class="Logo" src="images/R-white.png" alt="Skull-Logo">
      <nav>
        <ul class="nav__links">
          <li><a href="#">Roadmap</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">FAQ</a></li>
        </ul>
      </nav>
      <a class="cta" href="#"><button>Mint</button></a>
    </header>
    <div class="Start">
    <img class="background" src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">
    </div>
  </body>
</html>

单击“整页”按钮可在设备全屏模式下查看代码段

CSS：导航栏延迟 div

CSS: Nav bar delays div

html

css

css-position