在另一个上方显示 div答案

【问题标题】：Display div above another one在另一个上方显示 div
【发布时间】：2019-10-04 19:45:39
【问题描述】：

我确实有以下 div：

<div class="zoomTarget" style="position: absolute; z-index: 1050 !important; top: '.$y.'px; left: '.$x.'px;  height: 46px; width: 210px; border: none;">
  <div id="'.$id.'-1" class="rtop" style="z-index: 1050 !important; position: absolute !important; bottom: 0px; left: 0px;  height: '.$height1.'px; width: 200 px;">'.$gn1.'</div>
</div>

外层 div 是一个容器，包含一个较小的 div，固定在容器的左下边缘。这个较小的 div 会定期更改大小。我需要在容器内放置另一个 div，该容器锚定在较小的 div 的顶部（特别是上方），这样当 div 改变大小时，它会相应地重新定位。

我试图将一个 div 放在相对位置为 y -20 的较小 div 中，但该 div 根本没有出现。它不知何故不可见。这是怎么做到的？

编辑：

由于小 div 的内容将来会以编程方式更新，因此其他 div 不能在小 div 内。它必须在小 div 之外，并且以某种方式链接到小 div 的左上边缘

SAMPLE：DIV1 锚定在父级的左下角并改变高度。 DIV2 应该停留在 DIV1 的顶部，并根据 DIV1 的大小上下移动。

 ---------- 
|          |
|          |
| -------- |
||   DIV2 ||
| -------- |
| -------- |
||   DIV1 ||
| -------- |
 ----------

【问题讨论】：

不清楚要达到什么效果，能不能做个图或者别的？
@skobaljic 我试着画一个草图..希望现在很清楚。请告诉我..谢谢
你看过 flexbox 吗？
为什么你的包含父元素的高度只有46px？
那是我写的一个随机数。我确实有一个变量也发生了变化，但为了简化我使用了一个随机值

标签： html css css-position

【解决方案1】：

根据草图，你需要这种标记：

.container-div {
    height: 150px;
    position: relative;
    background: yellow;
}
.bottom-div {
    position: absolute;
    bottom: 0;
    left: 0;
    background: orange;
}
.above-bottom-div {
    position: absolute;
    bottom: 100%;
    background: pink;
}

<div class="container-div">
    <div class="bottom-div">
        bottom
        <div class="above-bottom-div">
            above bottom
        </div>
    </div>
</div>

希望这是我们的目标。也在JSFiddle。

【讨论】：