Question

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/example.css" rel="stylesheet" type="text/css" />
    <title>My Portfolio</title>
  </head>
  <body>

    <div class="nav">
      <ul>
        <li>About</li>
        <li>Portfolio</li>
        <li>Contact</li>
      </ul>
    </div>

    <div class="content">
      <p>Self-studying to become a web developer. Learning HTML, CSS, and JavaScript plus jQuery through Jon Duckett's books and FreeCodeCamp. Once I get my entry level job, I wish to study more and expand on back-end development, so I can become a full-stack developer.</p>
      <p>Portfolio:</p>
      <p>Contact me here:</p>
      <input type="text" />
      <br />
      <input type="text" />
      <br />
      <input type="text" />
      <br />
      <input type="submit" value="Send" />
      <p>Here's where you can get in touch with me! Here, you can request for my resume, get more details on my experience, or learn more about my favorite hobbies! I will reply as soon as I am able, thanks!
    </div>

  </body>
</html>


body {
  margin: 0px;
  background-color: rgba(195, 246, 255, 0.56);
}

.nav {
  background-color: rgba(190, 190, 190, 0.72);
  position: fixed;
  left: 0px;
  right: 0px;
  text-align: center;
  height: 100px;
  border: 1px solid black;
}

li {
  display: inline;
  font-size: 20px;
}

.content {
  border: 1px solid green;
  background-color: white;
  width: 1100px;
  margin-top: 102px;
}

我试图将导航栏置于顶部，我的内容位于其下方，因此它不会干扰。我将.nav设置为height = 100px，当我尝试使用margin-top：102px设置我的.content时，它最终也会移动.nav栏。但是，当我添加边框如边框时：1px实心黑色;它到我的身体，它最终工作。我很困惑！我是否可以这样做，以便在不向我的身体添加边框的情况下，导航正确显示在我的内容之上？

Answer 1

position: fixed 会将元素固定在页面上，以便它始终显示在该位置（如果需要，内容可以在顶部或后面）。如果您希望将导航栏放在页面顶部，则需要将 top: 0 应用于其中：

＆＃13;

body {
  margin: 0px;
  background-color: rgba(195, 246, 255, 0.56);
}

.nav {
  background-color: rgba(190, 190, 190, 0.72);
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0;
  text-align: center;
  height: 100px;
  border: 1px solid black;
}

li {
  display: inline;
  font-size: 20px;
}

.content {
  border: 1px solid green;
  background-color: white;
  width: 1100px;
  margin-top: 102px;
}

＆＃13;

<body>

  <div class="nav">
    <ul>
      <li>About</li>
      <li>Portfolio</li>
      <li>Contact</li>
    </ul>
  </div>

  <div class="content">
    <p>Self-studying to become a web developer. Learning HTML, CSS, and JavaScript plus jQuery through Jon Duckett's books and FreeCodeCamp. Once I get my entry level job, I wish to study more and expand on back-end development, so I can become a full-stack
      developer.</p>
    <p>Portfolio:</p>
    <p>Contact me here:</p>
    <input type="text" />
    <br />
    <input type="text" />
    <br />
    <input type="text" />
    <br />
    <input type="submit" value="Send" />
    <p>Here's where you can get in touch with me! Here, you can request for my resume, get more details on my experience, or learn more about my favorite hobbies! I will reply as soon as I am able, thanks!
  </div>

</body>

＆＃13;

如果您不希望它在滚动时模糊内容，则您需要 position: relative 。您还可能希望删除margin-top: 102px上的.content：

＆＃13;

body {
  margin: 0px;
  background-color: rgba(195, 246, 255, 0.56);
}

.nav {
  background-color: rgba(190, 190, 190, 0.72);
  position: relative;
  left: 0px;
  right: 0px;
  top: 0;
  text-align: center;
  height: 100px;
  border: 1px solid black;
}

li {
  display: inline;
  font-size: 20px;
}

.content {
  border: 1px solid green;
  background-color: white;
  width: 1100px;
}

＆＃13;

<body>

  <div class="nav">
    <ul>
      <li>About</li>
      <li>Portfolio</li>
      <li>Contact</li>
    </ul>
  </div>

  <div class="content">
    <p>Self-studying to become a web developer. Learning HTML, CSS, and JavaScript plus jQuery through Jon Duckett's books and FreeCodeCamp. Once I get my entry level job, I wish to study more and expand on back-end development, so I can become a full-stack
      developer.</p>
    <p>Portfolio:</p>
    <p>Contact me here:</p>
    <input type="text" />
    <br />
    <input type="text" />
    <br />
    <input type="text" />
    <br />
    <input type="submit" value="Send" />
    <p>Here's where you can get in touch with me! Here, you can request for my resume, get more details on my experience, or learn more about my favorite hobbies! I will reply as soon as I am able, thanks!
  </div>

</body>

＆＃13;

希望这有帮助！：）

Answer 2

您应该将top: 0;设置为.nav类，否则它会尝试垂直保留现有位置，这可能是保证金影响它的原因。

导航栏位置：固定不正确显示？

2 个答案: