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

Question

进入我正在处理的一个简单的 HTML\CSS（由另一位开发人员编写）我发现了这种情况，在 HTML 部分我有一个 header 标签并且在下面此 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

尝试将 header height 添加为 body 的 padding-top。你应该先了解 position:fixed here.

body{
  padding-top: 80px; /* its header height */
}

已更新 fiddle：https://jsfiddle.net/AndreaNobili/h4xw4pva/1/

Answer 2

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

解决方案是在 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>

Answer 3

对于 #headerBar 位置设置为 position:fixed 。如果设置为position: relative表示该段不会隐藏。

请访问以下链接以了解职位属性:

1) http://www.w3schools.com/cssref/pr_class_position.asp

2) http://www.w3schools.com/cssref/playit.asp?filename=playcss_position&preval=fixed

Answer 4

因为position:fixed；属性。您还使用了 z-index，它还显示了每个元素上方的内容。

Answer 5

之所以会这样，是因为 CSS position: fixed; 中的元素已应用于 header 元素。 position为fixed时，块级元素在页面中保持不变，这样就可以访问固定部分定义的东西。要解决这个问题，应该删除 fixed property 或提供比 fixed block 元素的高度更大的 margin-bottom。

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

Why the content of this paragraph appear under the header tag content?

html

css

header