html - 为什么这段内容会出现在header标签内容下面？

Question

进入我正在处理的简单 HTML\CSS(由另一位开发人员编写)我发现了这种情况，在 HTML 部分我有一个 header标记并在此标题下声明一个段落 <p> :

<header id="headerBar">
  HEADER CONTENT
</header>

<p>HELLO WORLD !!!</p>

这是相关的 CSS:

#headerBar {
    background-color: #2ba981;
    color: white;
    height: 80px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

这里可以看到相关的JSFiddle:https://jsfiddle.net/AndreaNobili/h4xw4pva/1/

正如您在 JSFiddle 中看到的那样，应用之前的 CSS 设置，<p>内容显示在<header>下.

为什么我会出现这种行为？是什么原因？怎么了？

Answer 1

因为固定位置标题现在从文档流中取出，所以段落隐藏在它后面。

解决方案是在 body 中添加等于 header 高度的顶部填充。

#headerBar {
  background-color: #2ba981;
  color: white;
  height: 80px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}
body {
  padding-top: 80px;
}

<header id="headerBar">
  HEADER CONTENT
</header>

<p>HELLO WORLD !!!</p>