Prozentuale Höhe

Siehe Quelltext CSS. Hier sind ein paar Div Elementen mit darinliegenden Div Elementen welche alle eine Höhe von 50% haben. Sie reagieren unterschiedlich, je nachdem welche Eigenschaften das Elternelement hat.

Die prozentuale Höhe greift nicht, weil das Elternelement keine feste Höhe hat
Die prozentuale Höhe greift, weil das Elternelement eine feste Höhe hat.
Dieses Elternelement hat position: relative
Das darinliegende div position: absolute
Wie alle darin liegenden divs in diesem Beispiel hat es height: 50%
Die Prozentuale Höhe bezieht sich auf die Höhe des Vorfahren-Elements,
welches nicht static ist.
Würde sich das div am body ausrichten, weil das Elternelement static ist
wäre es halb so hoch wie der body
oder anders ausgedrückt halb so hoch wie das Browserfenster
siehe Position absolute
Div