Html 将div放置在其父级上

我想将子div放置在其父div的上方，如下图所示：

这孩子没有固定的身高

相关代码：

<footer id="parent">
    <div id="child" v-if="composing">
        <img src="/img/typing-indicator.gif" alt="typing" />
        <span>User is typing...</span>
    </div>
    <div id="input-container">
         .....
    </div>    
</footer>

使用边距顶部至其高度的负值，例如30px：

您可以在子对象上使用position:absolute，在父对象上使用position:relative，类似的用法应该可以：

.parent {
  position: relative;
  width: XXXX;
  height: XXXX; 
}

.child {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: XXXX;
  height: XXXX; 
}

也可以对“绝对位置”子对象使用“变换”属性：

.child {
  position: absolute;
  top: 0;
  transform: translateY(-100%);
  left: 0;
  width: XXXX;
  height: XXXX; 
}

给定位置：相对于父对象，位置：绝对；&底部：100%给儿童

.家长{ 位置：相对位置； 背景：粉红色； 利润上限：20px } .孩子{ 位置：绝对位置； 底部：100%； 左：0； 右：0； 背景：黄色； } 父母亲 小孩

---

位置：父元素上的相对位置，子元素上的绝对位置，以及top:-value，其中value是需要将其设置为的任意数字。更好的解决方案是按照您需要的方式构造DOM，而不是试图对抗文档流。另外，子元素的高度是动态的吗？这个解决方案除了底部外几乎是好的：应该使用100%而不是负的顶部值。前-100%；意味着子项将放置在paren上方的像素数与父项高度相同-例如，如果父项高度为100px，则子项的上边缘将从父项上方的100px开始。底部演示：100%：顶部演示：-100%：

.child {
  position: absolute;
  top: 0;
  transform: translateY(-100%);
  left: 0;
  width: XXXX;
  height: XXXX; 
}