Using top position affects whole page [duplicate] - html

Question

This question already has answers here:
position:relative leaves an empty space
(13 answers)
Closed 2 years ago.
I have a page with an angled DIV at the top and a DIV immediately below that which is angled. I've had to offset the position of both top DIVs so that they join together. The only issue is that the next DIV below these has a space the size of the 120px offset.
I could apply this to every DIV but doing this to the footer means that there's empty white space at the bottom of the page.
.top {
min-width: 100%;
min-height: 400px;
background: linear-gradient(45deg, #FF0000, #00FF00);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}
.main {
min-width: 100%;
min-height: 600px;
background: #0000FF;
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
position: relative;
top: -120px;
}
.next {
min-width: 100%;
min-height: 600px;
background: #000000;
}
<div class="top"></div>
<div class="main"></div>
<div class="next"></div>
Any ideas to make the black DIV begin at the bottom of the blue one and the rest of the page not be affected would be appreciated, you can't simply use top: -120px; on every DIV because then there's 120px of empty space at the bottom of the page.

Answer 1

You can change top by margin-top, it will have the same effect for the element, and the normal flow after it will be the same
.top {
min-width: 100%;
min-height: 400px;
background: linear-gradient(45deg, #FF0000, #00FF00);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}
.main {
min-width: 100%;
min-height: 600px;
background: #0000FF;
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
position: relative;
margin-top: -120px;
}
.next {
min-width: 100%;
min-height: 600px;
background: #000000;
}
<div class="top"></div>
<div class="main"></div>
<div class="next"></div>