在 CSS 之后放置一个 div ::after

Question

我有一个显示SVG图像的CSS::after。
我希望我的容器在此 SVG 图像之后显示。
正在发生的事情是，可以说 SVG "不占用任何空间"，下一个 DIV 正在被 SVG 覆盖。

感谢您对此进行调查。

.overpass-info-container::after {
content: " ";
position: absolute;
top: 100%;
left: 0;
height: 182px;
width: 100%;
background-color: white;
background: url("../images/curve.svg") bottom center;
background-size: 100%;
outline: 1px solid red;
}
/*  finding container  */
section.finding-container {
top: 180px;
display: flex;
position: absolute;
}
.find-agent {
margin-left: auto;
display: flex;
flex-flow: column;
}
.agent-profiles {
display: flex;
flex-flow: column;
}

<!-- ***** finding container ***** -->
<section class="finding-container">
<div class="find-agent">
<img src="./images/search.svg" alt="search">
</div>
<div class="agent-profiles">
<img src="./images/profiles.svg" alt="profiles">
</div>
</section>

Answer 1

In.overpass-info-container::after

• 尝试添加display: block
• 尝试将position: absolute替换为position: relative

这些更改应该为::after在 HTML 中提供自己的空间。

Answer 2

好吧，我做了一些简单的事情，仍然愿意接受建议。 我给每个孩子加了一个边距顶属性，这照顾了事情......

section.finding-container {
top: 180px;
display: flex;
position: absolute;
}
.find-agent {
margin-top: 200px;
margin-bottom: auto;
margin-left: 0;
display: inline-flex;
flex-flow: column;
}
.agent-profiles {
margin-top: 200px;
display: inline-flex;
flex-flow: column;
}

感谢所有试图提供帮助的人...