Div不占用空间

Question

我希望我的div . valorcard -content占用空间，并且不再位于第二部分的顶部。我希望它继续在图像顶部的一部分作为覆盖，但我不希望它覆盖第二部分。我如何占用空间和第二部分定位在底部，不被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

在CSS中最好避免使用绝对的尺寸值。相反，使用百分比或其他相对值。在这里，你也可以像calc(100% + 10px)一样设置一个特定的上距。

一个更好的解决方案可能是根据它们的视觉位置嵌套元素。如果你想让一个元素覆盖另一个元素，它应该是那个元素的子元素。当然，您可能需要像现在这样的文档结构，以实现正确的文本流。

Protip:使用边框而不是规则来显示视觉线条。它使您的标记更干净，并提供更多的灵活性。如果您正在使用Bootstrap，请使用提供的类。

#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

更新因为在OP编辑问题后，原始答案不再解决这个问题。

现在解决这个问题:

• 重新启用.valorCard { position: absolute; top: 370px }(如果您禁用了它)。
• 添加#valorCard-content { margin-bottom: 250px }以将.second section从#valorCard-content下移动(或任何适合您需要的值)。

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