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

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

我不知道如何使段落标记 user-text user-text-losangeles 始终位于 div user-container user-container-losangeles 下方.我认为它们应该自动堆叠，如果我更改 user-container-losangeles 的顶级属性，user-text-losangeles 也会被压低。

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

Answer 1

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

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

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

的空间相同