如何在顶部固定一个指定高度的 header 而不将顶部属性添加到兄弟部分以使其可见？

Question

我有一个小问题，我正在做一个项目，在这个项目中，所有东西都是字面上分开的，我只在 header 部分工作，没有触及任何其他东西，我可以如何 header 仅在部署 header 后显示在所有项目中，意思是？我无法访问 body，只能访问页眉。

我必须将 Header 设置为固定，我之前已经这样做了，但它们是我的个人项目，我给 header 一个高度，然后它旁边的部分我定位它相对并添加 top 属性以便 header 和部分都可见，header 不必覆盖部分或部分。

让我们放一些代码：

<body>

    <header></header>
    <section class="first_section"></section>
    <section></section>

</body>

和 css 这样的：

header {  position :fixed; height: 40px; }
section { position : relative; }
.first_section { top: 40px }

现在，我不能那样做，我不能触摸该部分或为其添加样式，为什么？因为它们非常动态，header 可以包含在多个站点中，这意味着触摸所有部分或一一覆盖它们是不合适的。

所以为了解决这个问题，我在 html 中尝试了这个：

<body>

    <header>
       <div class="header"></div>
    </header>
    <section class="first_section"></section>
    <section></section>

</body>

现在，我已经将所有 css 属性从 header 传递给具有 header 类名的 div，现在 header 是这样的：

header {  position :relative; width: 100%; height: 40px; }
.header { position: fixed; // many others properties }
section { position : relative; }
.first_section { top: 40px }

但是它不起作用？为什么？我不知道，但是当检查 header 中的高度属性时，它没有设置，header 在 css 文件中有宽度和高度属性，但是当我检查我看到高度是0，我想是因为它有固定的child，但我不知道如何固定它。

如有任何帮助，我们将不胜感激。

Answer 1

一个解决方案可能是在您的页眉中创建 2 个 div：一个固定的带有真实页眉的 div，另一个只是为了保留 space 所以什么都不会被覆盖：

<header>
  <div class="header trueHeader"></div>
  <div class="header"></div>
</header>

和

.header {
  height: 50px;
  width: 100vw;
}

.trueHeader {
  position: fixed;
  background-color: #f00;
}

示例：https://jsfiddle.net/jhsLngr4/1/

Answer 2

我知道答案已经被选中，但一个简单的解决方案是使用 position: sticky 像这样...

body {
  margin: 0;
  padding: 0;
}
header {
  position: sticky;
  top: 0;
  height: 50px;
  background-color: red;
}
section {
  height: 750px;
  background-color: white;
}
footer {
  height: 50px;
  background-color: green;
}
.someClass {
  padding: 10px;
  margin: 0;
}

<header></header>
<section>
 <p class="someClass">
  scroll down..
 </p>
</section>
<footer></footer>

如何在顶部固定一个指定高度的 header 而不将顶部属性添加到兄弟部分以使其可见？

How Can I fix a header of a specified height in the top without adding top property to the sibling section to make it visible?

html

css

positioning

css-position

如何在顶部固定一个指定高度的 header 而不将顶部 属性 添加到兄弟部分以使其可见？

How Can I fix a header of a specified height in the top without adding top property to the sibling section to make it visible?

html

css

positioning

css-position

如何在顶部固定一个指定高度的 header 而不将顶部属性添加到兄弟部分以使其可见？