So nutzen Sie die Standardoberseite für das absolut positionierte Element

Question

Nur beachten Sie position:absolute Element kann einen Standardwert top Wert basierend auf der Position seiner 'unmittelbaren Elternteil' unabhängig relative oder nicht zugewiesen werden. Entsprechend BoltClock,

bleibt es in der statischen Position und geht nirgendwohin. Hier

ist der Code:

.container { 
 
    height: 500px; 
 
    width: 300px; 
 
    position: relative; 
 
} 
 

 
.parent { 
 
    height: 200px; 
 
} 
 

 
.child { 
 
    height: 50px; 
 
    left: 0; 
 
    right: 0; 
 
    position: absolute; 
 
} 
 

 
.blue { 
 
    background-color: #a6cee3; 
 
    border: 3px solid #1f78b4; 
 
} 
 

 
.green { 
 
    background-color: #b2df8a; 
 
    border: 3px solid #33a02c; 
 
} 
 

 
.red { 
 
    background-color: #fb9a99; 
 
    border: 3px solid #e31a1c; 
 
} 
 

 
.orange { 
 
    background-color: #fdbf6f; 
 
    border: 3px solid #ff7f00; 
 
} 
 

 
.violet { 
 
    background-color: #cab2d6; 
 
    border: 3px solid #6a3d9a; 
 
}

<div class="container blue"> 
 
    <div class="parent orange"></div> 
 
    <div class="parent violet"> 
 
    <div class="child red"></div> 
 
    </div> 
 
</div>

Ich will die absolute Element machen besetzen die 'verbleibenden Raum' des Behälters, das heißt mit Ausnahme des ersten Elternteils. Meine Idee ist bottom:0 zu setzen, was ich erwarte, ist top schon irgendwie gesetzt ist, und wenn bottom auch gesetzt ist, Höhe berechnet werden kann, und erweitert den verbleibenden Platz, aber das funktioniert nicht aus.

Gibt es eine Lösung?

Answer 1

ein absolut positioniertes Box kann nur auf der statischen Position, wenn sowohl top und bottom (oder beides left und right oder alle vier) auto sind. Sie können keinen Versatz auf einer Seite einstellen und erwarten, dass die Box in der statischen Position bleibt, da, sobald Sie eine Box versetzen, sie sich nicht mehr in der statischen Position befindet.

Answer 2

Warum setzen Sie nicht die width und height Ihres absolut positionierten Kindelements auf 100%?

Siehe this remix Ihrer Geige.