将div放在其父级上方

Question

我想将子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>

Answer 1

将position: relative提供给父级和position: absolute;＆amp; bottom: 100%对孩子

.parent {
  position: relative;
  background: pink;
  margin-top: 20px
}

.child {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: yellow;
}

<div>
  <footer class="parent">
    parent
    <div class="child" v-if="composing">
        child
    </div> 
  </footer>
</div>

Answer 2

将margin-top用于其高度的负值（例如30px）：

.child{
    margin-top:-30px;
}

Answer 3

你可以在孩子身上使用position: absolute，在父亲身上使用position: relative，这样的话应该有效：

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

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

您还可以在绝对子位置上使用transform属性：

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