Question

我确实有以下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放在较小的div中，相对位置为y -20但是div根本没有出现。它以某种方式不可见。怎么办呢？

编辑：

由于较小div的内容将来会以程序方式更新，因此另一个div不能位于小div内。它必须在小div之外，并以某种方式链接到小的左上边缘

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

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

希望这是目标。同样在JSFiddle。

将div显示在另一个上方

1 个答案: