HTML-<h1>, <p> wont display in my <div> - html

Question

Firstly I attempted the only way I can think of to add 3 different
colours for the background, but now it won't allow me to display my
text.
I tried to use the position feature but it doesn't work and I am not sure what I am doing wrong or is there a better way to do the 3 colour background?
* {
margin: 0;
padding: 0;
}
div {
height: 1500px;
position: relative;
}
.a {
background: black;
}
.b {
background: #1e1d1d;
}
.a:after,
.c:before,
.c:after {
content: '';
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 200px;
display: block;
position: relative;
font-family: Arial;
}
.a:after {
background: black;
}
.c:before {
background: #1e1d1d;
right: 0;
height: 100%;
}
.c:after {
background: white;
right: 0;
height: 100%;
}
p {
position: fixed;
font-family: Arial;
color: white;
}
<div class="a">
<h1>DeadTreeStudios</h1>
</div>
<div class="b" style="position:absolute;">
<h1>
-I'm James, a freelance software developer & designer.
</h1>
<p>
I've always had a keen interest in design and development. Allthough there is always alot to learn, my skills are broad: from front end to back end development to app development. I enjoy it all!
</p>
<p>
I'm avaliable for remote work, or if you like to build somthing together, please get in touch.
</p>
</div>
<div class="c"></div>
<article></article>

Answer 1

There were multiple things wrong with your css that broke it, check this out.
You don't need position: absolute to do stuff like this
with height: 100vh; width: 100%; i make sure a section is filling the screen from top to bottom left to right
note that you could also use width:100vw; to fill it horizontally but in some cases it adds a horizontal scroll bar
* {
box-sizing: border-box;
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: arial;
}
section {
width: 100%;
height: 100vh;
}
#first {
background-color: black;
color: white;
padding-top: 48vh;
}
#second {
background-color: grey;
color: white;
}
#first h1 {
text-align: center;
vertical-align: middle;
}
<section id="first">
<h1>DeadTreeStudios</h1>
</section>
<section id="second">
<h1>
-I'm James, a freelance software developer & designer.
</h1>
<p>
I've always had a keen interest in design and development. Allthough there is always alot to learn, my skills are broad: from front end to back end development to app development. I enjoy it all!
<br> I'm avaliable for remote work, or if you like to build somthing together, please get in touch.
</p>
</section>
<section id="third">
</section>

Answer 2

I just fiddled your stuff.
I removed the
position:absolute;
inline style....
and gave .a and .b a color ofc you cant see black on black....
https://jsfiddle.net/nabrzovg/

Answer 3

I can't really understand what you are trying to do here. I removed all positions and changed colors to see whats happening.
* {
margin: 0;
padding: 0;
}
div {
height: 1500px;
}
.a {
background: red;
}
.b {
background: yellow;
z-index:22;
}
.a:after, .c:before, .c:after {
content: '';
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 200px;
display: block;
font-family: Arial;
}
.a:after {
background: black;
}
.c:before {
background: purple;
}
.c:after {
background: white;
}
p{
font-family: Arial;
color: white;
}
h1{
color: white;
}