Как позиционировать относительный элемент после фиксированного элемента

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>

Answer 2

изменить положение на абсолютное

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

Answer 3

Вместо 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>