Html 使用CSS，根据分区a的高度和位置，将分区a（B）放置在另一个分区（a）下方（垂直，而不是z索引）

考虑以下JSFIDLE：

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>

我不知道如何使段落标记user text user text losangeles始终位于div user container user container losangeles之下。我认为它们应该自动堆叠，如果我更改用户容器losangeles的top属性，用户文本losangeles也会被删除

请告诉我我犯了什么明显的错误

您可以使用padding top:25px；在容器上。城市洛杉矶bg而不是顶部：25px；的用户容器

---

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

这是结构的问题。你有两个选择。在两个组件上使用绝对和顶部进行定位。或者将两个组件分组到另一个div中，以便将它们放在一起。您还希望搜索use FlexBox以获得更好的响应性布局。用户容器losangeles和用户文本losangeles不是已经组合在一个div中了吗？洛杉矶市：是的，我看不到。在文本中添加页边顶部或在容器中添加页边底部就可以了。恐怕@arrasco不起作用。我的想法是，当我更改css:user container losangeles的top值时，用户文本losangeles应该向下移动相同的量，即始终保持与user container losangeles相同的间距。无论我在任何一个elementChampion上尝试了什么设置，这都不会发生！谢谢你的清楚解释。

.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%;
}