使用 CSS，根据 div A 的高度和位置，将一个 div (B) 放置在(垂直，而不是 z 索引)另一个 div (A) 的下方

Question

考虑以下jsfiddle：

https://jsfiddle.net/0fwhmhLe/

HTML 标记：

<div class="city-losangeles-bg">
<div class="user-container user-container-losangeles">
<div class="user-pic user-pic-losangeles"></div>
<div class="user-name-container">
<p class="user-name">User Name</p>
<div class="user-name-mask"></div>
</div>
<hr class="underline">
<div class="ellipse-container">
<div class="ellipse ellipse-losangeles-1"></div>
<div class="ellipse ellipse-losangeles-2 ellipse-with-left-margin"></div>
<div class="ellipse ellipse-losangeles-3 ellipse-with-left-margin"></div>
</div>
</div>
<p class="user-text user-text-losangeles">Some text that needs to be below the user-container div, based on the position and height of user-container</p>
</div>

.css：

.city-losangeles-bg
{
width: 100%;
height: 1230px;
top: 0px;
background-color: orange;
position: relative;
}
.user-container
{
position: relative;
width: 206px;
height: 192px;
background-color: green;
}
.user-container-losangeles
{
left: 41%;
top: 25px;
}
.user-pic
{
position: relative;
width: 73px;
height: 73px;
left: -36.5px;
margin-left: 50%;
border-radius: 50%;
border: none;
}
.user-pic-losangeles
{
background-color: red;
}
.user-name-mask
{
position: relative;
width: inherit;
height: inherit;
top: 0;
}
.user-name
{
position: relative;
font-family: Ariel;
font-size: 28px;
text-align: center;
width: 100%;
/*top: -6px;*/ /*so text hides properly under color bar reveal animation */
}
.underline
{
position: absolute;
width: 178px;
top: 138px;
left: 14px;
margin-top: 0;
margin-bottom: 0;
}
.ellipse-container
{
position: absolute;
width: 126px;
height: 30px;
top: 162px;
left: 40px;
}
.ellipse
{
position: relative;
width: 30px;
height: 30px;
float: left;
border-radius: 50%;
border: none;
}
.ellipse-with-left-margin
{
margin-left: 18px;
}
.ellipse-losangeles-1
{
background-color: #4574b4;
}
.ellipse-losangeles-2
{
background-color: #71c8ca;
}
.ellipse-losangeles-3
{
background-color: #e6dddd;
}
.user-text
{
position: relative;
margin-top: 0; /* 100 */
font-family: Ariel;
font-size: 26px;
text-align: center;
line-height: 50px;
color: #848484;
}
.user-text-losangeles
{
margin-left: 29%;
width: 50%;
}

我不知道如何使段落标签用户文本用户文本洛杉矶始终低于div 用户容器用户容器洛杉矶。 我认为它们应该自动堆叠，如果我更改了用户容器洛杉矶的顶级属性，那么用户文本洛杉矶也会被撞倒。

有人告诉我我犯了什么明显的错误！！

Answer 1

您可以在容器上使用padding-top: 25px;(.city-losangeles-bg( 而不是top:25px;.user-container-losangeles

https://jsfiddle.net/y8pocwsn/1/

原因是：使用position:relative和top设置，元素只是从其原始位置向下移动，但后续元素不会移动。为元素保留的空间仍然是它与top: 0占用的空间，这与该元素具有position: static相同