Div is not shown in order - html

Question

in my HTML code, I have some rows and div, but one div is shown before another, even if in the code is after. Div with class "contact" is shown before div with class "photos"
Photo: https://imgur.com/a/Y8BGQIM
<div class="photos">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 section-heading">Galerie Foto</div>
</div>
<div class="gallery">
<img src="background1.jpeg" alt="Cinque Terre">
</div>
<div class="gallery">
<img src="galerie1.jfif" alt="Forest">
</div>
<div class="gallery">
<img src="galerie2.jfif" alt="Northern Lights">
</div>
<div class="gallery">
<img src="galerie3.jfif" alt="Mountains">
</div>
</div>
<div class="contact">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 section-heading">Contact</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-6 section-subheading">
<h1><br>
<br>
</h1>
</div>
</div>
</div>
And the css code that I applied to the divs:
.photos{
width: 100%;
position: absolute;
background-color: black;
}
div.gallery {
border: 1px solid #ccc;
float: left;
}
.section-subheading:hover {
border: 5px solid #d3ae87;
}
div.gallery img {
width: 400px;
height: 400px;}
.contact{
width: 100%;
position: absolute;
background-color: black;
}

Answer 1

Hope deleting or commenting position: absolute in both the places will give you expected result.
Give a try. to below CSS
.photos{
width: 100%;
background-color: black;
}
div.gallery {
border: 1px solid #ccc;
float: left;
}
.section-subheading:hover {
border: 5px solid #d3ae87;
}
div.gallery img {
width: 400px;
height: 400px;}
.contact{
width: 100%;
background-color: black;
}

Answer 2

Position absolute will position both divs on top of one another at the top of the page if no other styling positions then differently. Remove the position absolute it is not needed here and add a float left to your photos class and your contact class so that the divs fall in order under one another because your gallery has a float left set.
.photos{
width: 100%;
float:left;
background-color: green;
}
div.gallery {
border: 1px solid #ccc;
float: left;
}
.section-subheading:hover {
border: 5px solid #d3ae87;
}
div.gallery img {
width: 400px;
height: 400px;}
.contact{
width: 100%;
background-color: black;
float:left;
}