0

I am trying to make a website that full the page with one color at the beginning part of the website, and when you scroll down, you will see different parts with different colors. However, this code is not working and I can not scroll down.
I searched the internet and I found This. However, the CSS solution will leave a white part on the left, so I changed the code, but the current problem occurs.

.MAX{
  width: 100vw;
  height: 100vh;
  left:0px;
  margin:0px;
  padding: 0px;
  position:absolute;
}
<div class="MAX" style="background:red;">
</div>
<p>
  I can not be shown
</p>
I want a CSS-only solution because I know little about Javascript.
Han Han
  • 328
  • 12

2 Answers2

2

You are using position: absolute; and that's why you cannot see the p element, position: relative; will give you your desired results

.MAX{
  width: 100vw;
  height: 100vh;
  left:0px;
  margin:0px;
  padding: 0px;
  position:relative;
}
Anis
  • 1,190
  • 2
  • 13
  • 26
1

Since you mentioned wanting multiple sections, each with a different color, I'll throw this out there too, as a simple example that you could build upon

section:nth-child(even){
  background-color: teal;
}

section:nth-child(odd){
  background-color: lavender;
}

section{
  height: 100vh;
  padding: 50px;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
<section>
  Part 1
</section>
<section>
  Part 2
</section>
<section>
  Part 3
</section>
<section>
  Part 4
</section>
<section>
  Part 5
</section>
Jake
  • 862
  • 6
  • 10
  • If I do not want the last part of the CSS code, what can I do?, the one with *margin: 0;* – Han Han Mar 14 '23 at 05:07
  • You can just remove the whole `*{...}` block, it's not essential to the functionality, just cleans up the appearance a bit. – Jake Mar 14 '23 at 06:15