html - 在另一个上方显示 div

标签 html css css-position

我确实有以下 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 ||
| -------- |
 ---------- 

最佳答案

根据草图,您需要这种标记:

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

关于html - 在另一个上方显示 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47081027/

相关文章:

html - 如何在绝对位置父级上设置子级高度

html - 无法在 span 元素内对齐 ionic

CSS创建一组具有自动宽度的均匀左边缘的文本

Javascript 超链接不适用于 jQuery 追加

css - 字体在 chrome 中的 HTML5 验证中更改

css - 如何在 IE6 中将字体大小设置为 0px?

html - 样式在 Mac 上不起作用但在 Windows 上正确

html - 如何在相同高度上设置字体大小和 Font Awesome 图标

PHP - 删除字符串中 HTML 标签的效果 - 但也显示它们?

javascript - 如何将 split() 函数与 html 标签和空格一起使用