CODEWITHSUNDEEP
htmlcss
Paul
Paul

Reputation: 3368

How to position a relative element after a fixed element

I am stuck in my attempt to get a position:relative element to display after a position:fixed element. As you can see in my snippet there is a green section and a blue one. The blue section is the fixed element, and the green being the relative element. With padding-top I can get the content of this section to start after the fixed element, but then the padding-top basically hides the fixed section.

How am I able to place the relative section 100vh from the top of the screen, so it enables the fixed section to be 100vh? Then when scrolling down the relative section starts to show.

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

Upvotes: 0

Views: 1221

Answers (3)

VXp
VXp

Reputation: 12068

Instead of padding-top use margin-top and apply some positioning to the fixed element:

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

Upvotes: 1

kish
kish

Reputation: 161

change position to absolute

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

Upvotes: 0

patelarpan
patelarpan

Reputation: 7991

You need to give margin-top instead of padding-top in your relative element. and also need to give padding-top: 100vh to #page-wrap so scroll height adjust.

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

Upvotes: 2

Related Questions