Position div oben auf der übergeordneten

Question

Ich will ein Kind div über seine Eltern positionieren, wie das folgende Bild zeigt:

Das Kind hat keine feste Höhe.

Relevante Code:

<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

Geben position: relative zu Eltern und position: absolute; & bottom: 100% zu Kind

.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

Verwenden margin-top zu negativen seiner Höhe (zum Beispiel 30px):

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

Answer 3

Sie position: absolute auf das Kind und position: relative auf dem übergeordneten verwenden können, so ähnlich funktionieren sollte:

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

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

Sie können auch Immobilien auf der absoluten Kind Position verwenden verwandeln:

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