Warum funktioniert die Höhe 100% auf einem absolut positionierten Element?

Question

Soweit ich weiß, dass die Höhe als Prozentsatz arbeiten soll, muss das Containerelement eine bestimmte Höhe haben. Dies gilt jedoch nicht für ein absolut positioniertes Element, bei dem der Vorfahr relativ positioniert ist. Hier ist ein funktionierendes Beispiel dafür, was ich meinte:

.container { 
 
    width: 400px; 
 
    background: cyan; 
 
    text-align: right; 
 
    position: relative; 
 
    color: white; 
 
} 
 

 
.child { 
 
    width: 90%; 
 
    height: 100%; 
 
    background: blue; 
 
} 
 

 
.absolute { 
 
    position: absolute; 
 
} 
 

 
.second { 
 
    margin-top: 30px; 
 
}

<div class="container"> 
 
    <div class="child absolute">Absolute</div> 
 
    one <br> two <br> three <br> one <br> two <br> three <br> 
 
</div> 
 
<div class="container second"> 
 
    <div class="child">Static</div> 
 
    one <br> two <br> three <br> one <br> two <br> three <br> 
 
</div>

Wie Sie die absolut platziert div angewendet 100% Höhe auf sie sehen können, aber nicht die statisch positioniert div. Warum?

Answer 1

Von MDN

relativ Dieses Schlüsselwort alle Elemente legt, als ob das Element nicht positioniert wurden, und stellt dann die Position des Elements, ohne das Layout zu ändern (und damit eine Lücke für das Element verlassen, wo würde es wurde es nicht positioniert worden). Die Auswirkung von position: relativ auf die Elemente table - * - group, table-row, table-column, table-cell und table-caption ist nicht definiert.

Read more. Ist sehr schön beschrieben.

Answer 2

Here ist ein großer lesen über die verschiedenen Positionstypen:

Absolute ist relativ zu dem Element Eltern und nicht durch andere Elemente betroffen sind und aus der Strömung von der Seite entfernt heißt Sie die Liste sehen mit eins, zwei, drei unberührt.

Seine Höhe ist 100% wie .child spezifiziert.