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

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 */
}

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