Question

进入我正在处理的简单HTML \ CSS（由其他开发人员编写）我发现了这种情况，在HTML部分我有一个header标记，并在此标题下声明了一个段落{{ 1}}：

<p>

这是相关的CSS：

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

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

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

正如您在JSFiddle中看到的，应用之前的CSS设置，#headerBar { background-color: #2ba981; color: white; height: 80px; position: fixed; top: 0; width: 100%; z-index: 9999; }内容显示在<p>下。

为什么我会获得此行为？原因是什么？有什么问题？

Answer 1

尝试将标题height添加为正文的padding-top。您应该先了解position:fixed here。

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

更新小提琴：https://jsfiddle.net/AndreaNobili/h4xw4pva/1/

Answer 2

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

解决方案是将顶部填充添加到等于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

因为位置：固定;属性。您还使用z-index，它还显示每个元素的上方内容。

Answer 5

这种情况正在发生，因为CSS position: fixed;已应用于header元素。位置为fixed时，块级元素在页面中保持不动，因此可以访问固定部分中定义的内容。要解决这个问题，应该删除fixed property或者使某些margin-bottom大于fixed block元素的高度。

为什么此段落的内容出现在标题标记内容下？

5 个答案: