Position div on top of another - html

Question

I'm trying to position my div .valorCard on top of my image. I want the div to have a piece of it on top of the end of the image, I'm using relative position on the image and absolute position on the div and a value on the bottom for that. But the div is covering my second section and I don't want that to happen. Can someone help me? I can't use absolute position in my second section because it ruins the style of it.
#valorContent {
padding: 0;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.valorCard {
padding: 0 24px;
position: absolute;
bottom: -190px;
width: 150px;
}
.valorCard-content {
border: 2px solid green;
background-color: grey;
}
<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

As I unserstand your explanation I thing this is the behavior that you desire.
Most in common. You already have used the flexbox with a column whih is nice.
If you would like to rearragne the elements inside the flex container there is no need to use the position: absolute. You have to just use the order: NUMBER property to order the elements inside the flex.
#valorContent {
padding: 0;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.valorCard {
padding: 0 24px;
bottom: -190px;
width: 60%;
order: 0;
}
.valorImagem {
order: 1;
}
.valorCard-content {
border: 2px solid green;
background-color: grey;
}
<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 2

If I understand your intentions correctly, you can add overflow: hidden; to the css for #valorContent to hide the overflowing part:
#valorContent {
padding: 0;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.valorCard {
padding: 0 24px;
position: absolute;
bottom: -190px;
width: 150px;
}
.valorCard-content {
border: 2px solid green;
background-color: grey;
}
<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>