为何HTML的p元素显示在div上方？移除position:fixed后标题变白？

问题1：p元素显示在div上方的解决 #

原因是.headline设置position: fixed后脱离正常文档流，后续内容会从页面顶部开始渲染；同时display: inline导致宽高设置失效，元素高度仅由内容撑开，视觉上出现p在div上方的情况。

解决步骤：

• 移除.headline的display: inline属性，固定定位元素无需设置inline，且inline元素无法生效宽高。
• 给.headline添加top: 0和left: 0，将元素固定在页面顶部（可根据需求调整位置）。
• 给body添加padding-top: 100px（与.headline的height值一致），避免后续内容被固定栏遮挡。

问题2：移除position:fixed后标题变白的解决 #

原因是.headline设置display: inline后，内部包含块级元素（.logo是div）触发浏览器怪异布局模式，导致文字颜色渲染异常。

解决步骤：

• 移除.headline的display: inline属性，块级元素默认可正常容纳内部块级元素，布局恢复后文字颜色会正确显示为设置的#fcab11。

修改后的完整代码 #

CSS代码 #

body {
  margin: 0px;
  padding-top: 100px; /* 避免内容被固定栏遮挡 */
}

.headline {
  height: 100px;
  width: 1000px;
  background-color: #14213D;
  position: fixed;
  top: 0;
  left: 0;
}

.logo {
  padding-top: 15px;
  padding-left: 50px;
  width: 300px;
}

.logo p {
  margin: 0px;
  color: #fcab11;
  font-weight: bolder;
  font-size: 50px;
  display: block;
}

HTML代码 #

<div class="headline">
  <div class="logo">
    <p>Muttis kurs</p>
  </div>
</div>
<p>hello</p>

内容的提问来源于stack exchange，提问作者Lulatsch3841