将位置设置为固定时，导航栏会缩小

Question

我目前遇到一个问题，当我将导航栏和横幅的位置设置为固定时，它们会缩小。我有很多事情，例如更改z-index，将其最高位置设置为0，添加自动边距等，而这些都没有的工作。我希望有人可以指出我的错误。这是我的html代码：

html,
body {
  margin: 0;
  background-color: #ffeecc;
  font-family: 'Chivo', sans-serif;
}

.container {
  margin: auto;
  width: 75%;
}

.nav_left {
  width: 100%;
  background-color: #258e25;
  height: 50px;
  float: left;
  text-align: left;
}

.banner {
  width: 100%;
  overflow: hidden;
  background-color: white;
}

.banner img {
  width: 70%;
  height: 150px;
  padding: 0 15%;
}

.top {
  position: fixed;
}

nav {
  text-align: center;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
}

nav ul li {
  float: left;
  text-align: center;
  height: 100%;
  width: 25%;
}

nav ul li a {
  display: inline-block;
  width: 100%;
  font-weight: bold;
  line-height: 50px;
  text-decoration: none;
  color: white;
}

nav ul li a:hover {
  background-color: white;
  color: black;
}

<div class="container">
  <div class="top">
    <div class="banner">
      <img src="images/winwin-logo-cover.jpg" alt="winwin logo">
    </div>
    <nav>
      <div class="nav_left">
        <ul>
          <li><a href="index.php" style="background-color: white; color:black ;font-size:25px;">PROIZVODI</a></li>
          <li><a href="o_nama.php">O NAMA</a></li>
          <li><a href="kontakt.php">KONTAKT</a></li>

        </ul>
      </div>
      <div class="nav_right"></div>
    </nav>
  </div>

这应该是什么样子

这就是我放.top{position:fixed}时的样子

Answer 1

当您将元素设置为absolute或fixed位置时，该元素将不在正常的内容流中，并触发缩小以适应功能。您可以将偏移量和宽度/高度应用于位置并重新创建所需的框尺寸。

.top {
  position: fixed;
  left: 0;      /* ADDED */
  top: 0;       /* ADDED */
  width: 100%;  /* ADDED */
}

html,
body {
  margin: 0;
  background-color: #ffeecc;
  font-family: 'Chivo', sans-serif;
}

.container {
  margin: auto;
  width: 75%;
}

.nav_left {
  width: 100%;
  background-color: #258e25;
  height: 50px;
  float: left;
  text-align: left;
}

.banner {
  width: 100%;
  overflow: hidden;
  background-color: white;
}

.banner img {
  width: 70%;
  height: 150px;
  padding: 0 15%;
}

.top {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

nav {
  text-align: center;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
}

nav ul li {
  float: left;
  text-align: center;
  height: 100%;
  width: 25%;
}

nav ul li a {
  display: inline-block;
  width: 100%;
  font-weight: bold;
  line-height: 50px;
  text-decoration: none;
  color: white;
}

nav ul li a:hover {
  background-color: white;
  color: black;
}

<div class="container">
  <div class="top">
    <div class="banner">
      <img src="images/winwin-logo-cover.jpg" alt="winwin logo">
    </div>
    <nav>
      <div class="nav_left">
        <ul>
          <li><a href="index.php" style="background-color: white; color:black ;font-size:25px;">PROIZVODI</a></li>
          <li><a href="o_nama.php">O NAMA</a></li>
          <li><a href="kontakt.php">KONTAKT</a></li>
        </ul>
      </div>
      <div class="nav_right"></div>
    </nav>
  </div>

Answer 2

因为.top没有宽度。但是，当设置为fixed时，它将使用视口宽度来计算宽度。您可能需要将其设置为75%。

您可能还希望将.container设置为position: relative，以便.top与其边界相关。

body {
  margin: 0;
  background-color: #ffeecc;
  font-family: 'Chivo', sans-serif;
}

.container {
  margin: auto;
  width: 75%;
  position: relative;
}

.top {
  position: fixed;
  width: 75%;
}

.nav_left {
  width: 100%;
  background-color: #258e25;
  height: 50px;
  float: left;
  text-align: left;
}

nav {
  text-align: center;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
}

nav ul li {
  float: left;
  text-align: center;
  height: 100%;
  width: 25%;
}

nav ul li a {
  display: inline-block;
  width: 100%;
  font-weight: bold;
  line-height: 50px;
  text-decoration: none;
  color: white;
}

nav ul li a:hover {
  background-color: white;
  color: black;
}

<div class="container">
  <div class="top">
    <nav>
      <div class="nav_left">
        <ul>
          <li><a href="index.php" style="background-color: white; color:black ;font-size:25px;">PROIZVODI</a></li>
          <li><a href="o_nama.php">O NAMA</a></li>
          <li><a href="kontakt.php">KONTAKT</a></li>

        </ul>
      </div>
      <div class="nav_right"></div>
    </nav>
  </div>