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，以便滚动高度调整。

＆＃13;

* {
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;
}

＆＃13;

<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>

＆＃13;

Answer 2

而不是padding-top使用margin-top并将一些定位应用于fixed元素：

#page-wrap {
  margin-top: 70px;
  max-width: 100%;
}

#homeMain {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0; /* added */
  left: 0; /* added */
  background: blue;
}

#sectionCover {
  position: relative;
  margin-top: 100vh; /* modified */
  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 3

将位置更改为绝对

#homeMain {
    width: 100%;
    height: 100vh;
    **position: absolute;**
    background: blue;
    z-index:2;
}

#page-wrap {
	margin-top: 70px;
	max-width: 100%;
}
#homeMain {
	width: 100%;
	height: 100vh;
	position: absolute;
    background: blue;
    z-index:2;
}
#sectionCover {
	position: relative;
	padding-top: 100vh;    
	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>

如何在固定元素之后定位相对元素

3 个答案: