CSS Allineare superiore del contenitore figlio al fondo del contenitore principale

Question

Considerate questo HTML

<div class="parent"> 
    <a href="#">Parent</a> 
    <div class="child"> 
     <a href="#">Child</a> 
    </div> 
</div> 

Quello che voglio fare è la posizione della parte superiore del child al fondo della parent.

Ecco la mia CSS finora:

.parent { 
    position: relative; 
} 

.child { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
} 

Ciò realizza è questo:

Quello che voglio ottenere è questo:

richiesta nota: Non conosco l'altezza del contenitore genitore o figlio, e non voglio davvero impostare un'altezza arbitraria, e non voglio tornare a usare JavaScript.

Answer 1

.parent { 
    position: relative; 
    background-color: #F00; 
} 

.child { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    background-color: #00F; 
} 

Answer 2

Si può fare questo con transform: translateY(100%)

Il translateY() funzione CSS sposta l'elemento in verticale sul piano. Questa trasformazione è caratterizzata da un <length> che definisce quanto si sposta verticalmente.
translateY(ty) è un collegamento per translate(0, ty).

.parent { 
 
    position: relative; 
 
    background: red; 
 
    width: 50%; 
 
    height: 50vh; 
 
} 
 

 
.child { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    background: blue; 
 
    height: 100px; 
 
    width: 100px; 
 
    transform: translateY(100%); 
 
}

<div class="parent"> 
 
    <a href="#">Parent</a> 
 
    <div class="child"> 
 
     <a href="#">Child</a> 
 
    </div> 
 
</div>