How to do div after div in page order - html

Question

I'm beginner in CSS, I can't put div after
For example :
I want to put red div after green div as the image shows:
but I want to make divs sticking to the edges of the screen .
What I tried :
.green {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: green;
margin-bottom: 5px;
}
.red {
position: absolute;
left: 0;
width: 100%;
height: 50%;
background-color: red;
}
<div class="green">
</div>
<div class="red">
</div>

Answer 1

Just declare top + bottom. To span the entire width you could also use: left + righ: 0.
To shorten the code you can also use the inset-property with a 3 value syntax:
inset: [top] [left/right] [bottom]
body {
margin: 0;
}
.green {
position: absolute;
inset: 0 0 50%;
background-color: green;
}
.red {
position: absolute;
inset: 50% 0 0;
background-color: red;
}
<div class="green">
</div>
<div class="red">
</div>

Answer 2

If you just write this code with relative positions I think will do the work. But following your example (where you set the position as absolute) I let you the following code. I don't know if it is what do you expect, if it isn't, please com back with more details.
.green {
position: absolute;
width: 100%;
top: 0;
left: 0;
width: 100%;
height: 50vh;
background-color: green;
margin-bottom: 5px;
}
.red {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 50vh;
background-color: red;
transform: translateY(100%);
}
<div class="green">
</div>
<div class="red">
</div>

Answer 3

You can use vh (viewport width) units to set height relative to the viewport.
body {
padding: 0;
margin: 0;
}
.green {
width: 100%;
height: 50vh;
background-color: green;
}
.red {
width: 100%;
height: 50vh;
background-color: red;
}
<div class="green">
</div>
<div class="red">
</div>

Answer 4

It is happening because red div is overlapping your green div
so just change your code into this:
.green{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: green;
margin-bottom: 5px;
}
.red {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 50%;
background-color: red;
}
<div class="green"></div>
<div class="red"></div>

Answer 5

The big question is, what do you mean by
i want to put red div after green div
Your browser reads its given html-code from left to right and from top to bottom, until you define something different in your CSS. This means "after" can also mean an alignment of your red div on the right edge of your green div.
But all you need is basically the snippet down below.
If you want them to be align centered (like shown in your screenshot), just add "margin: 0 auto" and you good to go.
I personally can only recommend testing positioning, as a beginner, with absolute values like "px" instead of relative values like percentage. This makes it much easier to understand what's happening.
.green {
background-color: green;
height: 100px;
width: 100px;
// margin: 0 auto;
}
.red {
background-color: red;
height: 100px;
width: 100px;
// margin: 0 auto;
}
<div class="green">
</div>
<div class="red">
</div>
! of Course, if you run the code you have to remove the comment signs !