当我使用 css 设置网页样式时，每当我用来固定 header 的位置时，它的宽度就会减小。我该如何解决这个问题？

Question

我正在使用下面的代码来固定 header 栏的位置，但是这段代码干扰了 HTML 的其他组件。

    .container header{
        position:fixed;
    }

每当我写关于 position 的代码时，header[=25 的 width =] 减少，它还覆盖了它下面的菜单部分。

然后无法看到菜单的某些部分。如何设置样式以便 HTML 的其他组件保持其自身的样式

Answer 1

当您将元素设置为固定或绝对位置时，它不再尝试填充父元素的宽度。它将占用其内容的宽度和高度。这些元素也从正常文档流中取出，因此它们不再占用任何 space.

使用 position: fixed; 会将元素与包含元素的浏览器视口对齐。由于固定位置元素不占用任何 space 内容的重置将表现得好像它不在页面上并相应地定位自己。然后，固定位置元素将最终覆盖该内容。

要补救覆盖影响，您需要向被覆盖的元素添加等于固定位置元素高度（或更高）的填充或边距。填充通常用作边距折叠。

调整大小和填充之前

body {
  margin: 0;
}
header {
  position: fixed;
  top: 0;
  line-height: 30px;
  background-color: #444;
  color: #f1f1f1;
}

<header>
  Something should go here.
</header>
<main>
  <p>
    Content after fixed position element.
  </p>
  <p>
    Content after fixed position element.
  </p>
</main>

有尺寸和填充

body {
  margin: 0;
}
header {
  position: fixed;
  top: 0;
  width: 100%; /* -or- left: 0; right: 0; */
  line-height: 30px;
  background-color: #444;
  color: #f1f1f1;
}
main {
  padding-top: 30px; /* -or- margin-top: 30px; -watch out for collapsing margins- */
}

<header>
  Something should go here.
</header>
<main>
  <p>
    Content after fixed position element.
  </p>
  <p>
    Content after fixed position element.
  </p>
</main>

当我使用 css 设置网页样式时，每当我用来固定 header 的位置时，它的宽度就会减小。我该如何解决这个问题？

While styling the web using css whenever I used to fix the position of the header its width decreases. How can I solve this?

html

css

position

调整大小和填充之前

有尺寸和填充