html - 如何在固定元素之后放置相对元素

Question

我试图让 position:relative 元素显示在 position:fixed 元素之后。正如您在我的代码片段中看到的那样，有一个绿色部分和一个蓝色部分。蓝色部分是固定元素，绿色部分是相对元素。使用 padding-top 我可以让这部分的内容在固定元素之后开始，但是 padding-top 基本上隐藏了固定部分。

如何从屏幕顶部放置相关部分 100vh，从而使固定部分成为 100vh？然后，当向下滚动时，相关部分开始显示。

#page-wrap {
	margin-top: 70px;
	max-width: 100%;
}
#homeMain {
	width: 100%;
	height: 100vh;
	position: fixed;
  background: blue;
}
#sectionCover {
	position: relative;
	padding-top: 100vh;
	/*z-index: 1;*/
	height: auto;
	width: 100%;
  background: green;
}

<div id="page-wrap">
  <section id="homeMain">
    <p>fndskjafndoaf</p>
  </section>
  <div id="sectionCover">
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p><p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p><p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  </div>
</div>

Answer 1

您需要在相关元素中提供 margin-top 而不是 padding-top。 并且还需要将 padding-top: 100vh 给 #page-wrap 以便调整滚动高度。

* {
margin:0;
padding:0;
}
#page-wrap {
	margin-top: 70px;
	max-width: 100%;
  padding-top: 100vh;
}
#homeMain {
	width: 100%;
	height: 100vh;
	position: fixed;
  top:0;
  background: blue;
}
#sectionCover {
	position: relative;
	margin-top: 100vh;
	/*z-index: 1;*/
	min-height: 100vh;
	width: 100%;
  background: green;
}

<div id="page-wrap">
  <section id="homeMain">
    <p>fndskjafndoaf</p>
  </section>
  <div id="sectionCover">
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p><p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p><p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  </div>
</div>