Div not taking space - html

Question

I want my div .valorCard-content to take up space and stop sitting on top of the second section. I want it to continue with a portion on top of the image as an overlay, but I don't want it to cover the second section. How do I take up space and the second section is positioned at the bottom, not being covered by the div .valorCard-content?
#valorContent {
padding: 0;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.valorCard {
padding: 0 24px;
position: absolute;
top: 370px;
}
.valorCard-content {
border: 2px solid green;
background-color: white;
}
<section class="valor py-5 mt-4">
<div class="container pt-5" id="valorContent">
<div class="valorImagem">
<img class="img-fluid" src="https://source.unsplash.com/user/c_v_r/414x421">
</div>
<div class="valorCard text-center">
<div class="valorCard-content py-5 px-4">
<h2 class="valor-titulo mx-4">
Lorem Ipsum
</h2>
<hr>
<div class="valor-lista">
<div class="item ">
<h4 class="mx-4">Test</h4>
</div>
<hr>
<div class="item ">
<h4 class="mx-4">Test</h4>
</div>
<hr>
<div class="item ">
<h4 class="mx-4">Test</h4>
</div>
<hr>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="second">
<div>
<div>
<div>
<div>
<p class="depoimento-txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="col-lg-5 cardbox cardbox-dep">
<div class="p-4 pt-5 mx-2">
<p class="depoimento-txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
</div>
</section>

Answer 1

It's generally best to avoid absolute dimensional values in CSS. Instead, use percentages or other relative values. Here you could also do something like calc(100% + 10px) to give a specific top margin.
A better solution might be to nest the elements according to their visual location. If you want an element to overlay another, it should really be that element's child. Of course, you may want a document structure as you have it now for proper text flow.
Protip: Use border rather than rules for visual lines. It keeps your markup cleaner and gives more flexibility. If you're using Bootstrap, use the classes provided.
#valorContent {
padding: 0;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.valorCard {
padding: 0 24px;
position: absolute;
top: 100%;
/* <--------------------------- HERE */
}
.valorCard-content {
border: 2px solid green;
background-color: white;
}
.border-bottom {
border-bottom: 1px solid #ddd;
}
<section class="valor py-5 mt-4">
<div class="container pt-5" id="valorContent">
<div class="valorImagem">
<img class="img-fluid" src="https://via.placeholder.com/414x421">
</div>
<div class="valorCard text-center">
<div class="valorCard-content py-5 px-4">
<h2 class="valor-titulo mx-4 mb-2 border-bottom">
Lorem Ipsum
</h2>
<div class="valor-lista">
<div class="item border-bottom">
<h4 class="mx-4">Test</h4>
</div>
<div class="item border-bottom">
<h4 class="mx-4">Test</h4>
</div>
<div class="item border-bottom">
<h4 class="mx-4">Test</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="second">
<div>
<div>
<div>
<div>
<p class="depoimento-txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="col-lg-5 cardbox cardbox-dep">
<div class="p-4 pt-5 mx-2">
<p class="depoimento-txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
</div>
</section>

Answer 2

Update as the original answer did not address the issue anymore after OP redacted the question.
To solve the issue now:
reenable .valorCard { position: absolute; top: 370px } (if you disabled it).
add #valorCard-content { margin-bottom: 250px } to move the .second section down from under #valorCard-content (or any value that fits your needs).
#valorContent {
padding: 0;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 250px;
}
.valorCard {
padding: 0 24px;
position: absolute;
top: 370px;
}
.valorCard-content {
border: 2px solid green;
background-color: white;
}
<section class="valor py-5 mt-4">
<div class="container pt-5" id="valorContent">
<div class="valorImagem">
<img class="img-fluid" src="https://source.unsplash.com/user/c_v_r/414x421">
</div>
<div class="valorCard text-center">
<div class="valorCard-content py-5 px-4">
<h2 class="valor-titulo mx-4">
Lorem Ipsum
</h2>
<hr>
<div class="valor-lista">
<div class="item ">
<h4 class="mx-4">Test</h4>
</div>
<hr>
<div class="item ">
<h4 class="mx-4">Test</h4>
</div>
<hr>
<div class="item ">
<h4 class="mx-4">Test</h4>
</div>
<hr>
</div>
</div>
</div>
</div>
<!-- </div> -->
</section>
<section class="second">
<div>
<div>
<div>
<div>
<p class="depoimento-txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="col-lg-5 cardbox cardbox-dep">
<div class="p-4 pt-5 mx-2">
<p class="depoimento-txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
</div>
</section>