将div置于另一个div之上

Question

我试图定位我的div . valorcard在我的图像的顶部。我想让div在图像末尾的顶部有一部分，我在图像上使用相对位置在div上使用绝对位置在底部使用值。但是这个div覆盖了我的第二部分，我不希望这样。有人能帮帮我吗?我不能在我的第二部分使用绝对位置，因为它破坏了它的风格。

#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

我理解了你的解释，我认为这就是你想要的行为。

最常见的。您已经使用了flexx的列，这是很好的。如果您想重新排列flex容器内的元素，则不需要使用position: absolute。你只需要使用order: NUMBER属性来排列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

如果我正确理解你的意图，你可以将overflow: hidden;添加到#valorContent的css中以隐藏溢出部分:

#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>