html - 内容文本与我的固定标题重叠

Question

我的页面顶部有一个固定的标题，但当我向上滚动时，内容文本仍停留在我的标题顶部。我希望内容位于标题后面。

我已经尝试调整边距并使用 z-index，但到目前为止没有任何效果。

.header {
  position: fixed;
  border-bottom: 1px solid #000000;
  width: 90%;
  z-index: 1000;
}

.main {
  position: relative;
  top: 140px;
  z-index: 1;
}

<header class="header">
  <a href="index.htm"><img src=""></a>
</header>

<div class="main">
  <h1>Hello World!</h1>
</div>

Answer 1

您的代码按预期工作。但是，您忘记设置页眉的背景颜色，这意味着它是透明的。

我对您的代码段进行了一些修改，使其从代码段中更加明显，但重要的 CSS 是背景色。

.header {
  position: fixed;
  border-bottom: 1px solid #000000;
  width: 90%;
  z-index: 1000;
  background: #fff;
  top: 0; left: 0; right: 0;
  width: 100%;
height: 50px;
}

.main {
  position: relative;
  top: 140px;
  z-index: 1;
}

<header class="header">
  <a href="index.htm"><img src=""></a>
</header>

<div class="main">
  <h1>Hello World!</h1>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis tellus at magna vulputate, sed tempus arcu finibus. Fusce cursus aliquam posuere. Cras sodales dolor vitae massa eleifend bibendum. Nunc pulvinar dui quis hendrerit pulvinar. Nam interdum, justo non tristique hendrerit, leo nibh posuere diam, sed facilisis est mauris id libero. Suspendisse eget lectus augue. Fusce eget justo ut enim convallis ornare. Maecenas tincidunt dui non lectus elementum rhoncus. Nam sed porttitor turpis. Fusce sit amet urna quis tellus tempus tempus vehicula id tortor. Maecenas tincidunt sit amet eros a ultrices.
</p>
<p>
Vivamus pharetra eget tortor ac imperdiet. Nulla vitae mauris a mauris convallis ultricies at non arcu. Sed blandit turpis quis purus dapibus ornare. Cras ultricies dignissim lorem, sed viverra leo elementum eget. Ut condimentum a nunc in auctor. Pellentesque quis tortor blandit, tincidunt sem et, vestibulum sem. Pellentesque tincidunt ligula ac lectus suscipit dictum. Integer ante ex, pulvinar sit amet laoreet ac, lacinia vel nisl.
</p>
<p>
Cras lacinia at nibh ac placerat. Donec ut molestie felis. Quisque non rutrum diam, a laoreet risus. Maecenas vitae cursus massa, ut ultricies ante. Donec sed sem vel lorem luctus consequat. Integer efficitur pulvinar nulla sed malesuada. Curabitur sollicitudin, libero sit amet cursus pharetra, massa risus auctor neque, vel luctus nulla massa sit amet erat. Quisque at vestibulum nulla. Vestibulum porttitor augue nec placerat scelerisque. Nulla sed augue ac est venenatis viverra vitae non enim. Nulla facilisi. Ut tincidunt est nec volutpat vulputate.
</p>
<p>
Aenean quam risus, ornare et lacus eu, ultricies lobortis metus. Sed ut eleifend nisl. Vestibulum sed odio lobortis, eleifend ex ac, lacinia dui. Nullam sagittis varius sollicitudin. Vestibulum vel nisi diam. Aliquam nulla dolor, porta id ultricies eu, vulputate nec ipsum. Suspendisse porta lectus in augue egestas dictum. Nullam felis sapien, pulvinar quis felis non, ultrices accumsan dolor. Curabitur at diam mollis, porttitor orci ut, posuere nulla. Suspendisse nec sapien eros. Sed sit amet cursus est. Etiam ut lectus ut purus dictum ornare vitae eget lacus. Quisque rhoncus auctor sollicitudin. Nulla feugiat est sit amet tristique hendrerit.
</p>
<p>
Praesent vel enim vel est tincidunt aliquet. Nullam feugiat odio id ante consectetur commodo. Nam sagittis accumsan enim, non faucibus lacus lobortis sit amet. Aliquam tellus dui, volutpat sed gravida sit amet, tincidunt nec diam. Ut rhoncus facilisis tortor, et eleifend sem sagittis id. Maecenas sed odio felis. Donec eu iaculis metus. Integer dignissim volutpat lectus, id ultricies nisl hendrerit sit amet. Donec egestas gravida felis. Aenean blandit iaculis elit, nec luctus tortor luctus ut.
</p></div>
</div>