如何让我的 html 内容在标题元素下方滚动？答案

【问题标题】：How do I have my html content scroll underneath my header elements?如何让我的 html 内容在标题元素下方滚动？
【发布时间】：2014-05-25 08:40:51
【问题描述】：

我有一个图像被用作我的 head 元素下的标题，但其余内容没有在下面流动。这是我的标题CSS，

#header {
  left:0px;
  width:100%;
  top:0px;
  position:fixed;
}

标题的html代码，

<head>
<title>MyWebPage</title>
<img src="../../Pictures/header.jpg" id="header" />
...

这是 html 正文其余部分的基本 CSS，

#main {
  background-color:rgb(0,0,0);
  margin-top:25px;
}

我不确定是否必须在标题或正文中添加任何样式，以便当用户在网页上上下移动时正文的内容在标题下方滚动，因为内容在标题上方滚动。

【问题讨论】：

【解决方案1】：

首先，为什么要将图像放入 head-element 中？这甚至可能吗，我不这么认为，你们是<header>吗？

z-index 属性定义了哪些元素相互重叠/重叠，z-index 越高，元素在层次结构顶部的位置就越多。

刚刚设置

#header {
left:0px;
width:100%;
top:0px;
position:fixed;
z-index: 999;
}

它会在顶部。

有关 z-index 的更多信息，请查看MDN

【讨论】：