絶対配置要素のデフォルトトップを利用する方法

Question

position:absolute要素には、に関係なく、その「直接の親」の位置に基づいてデフォルトのtop値を割り当てることができます。 BoltClockによれば、

それは静的位置に留まり、どこにも行きません。ここで

コードです：

.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>

私は絶対的な要素は、すなわち最初の親を除いて、コンテナの「残りのスペース」を占めるようにしたいが。私の考えはbottom:0を設定することです。topはすでに何とか設定されており、bottomも設定されていれば、高さを計算して残りのスペースを広げることができますが、これはうまくいかないでしょう。

解決策はありますか？

Answer 1

絶対配置ボックスは、静的な位置をとることができます。片側にオフセットを設定することはできず、一度ボックスをオフセットするとボックスは静的な位置にとどまるようにすることはできません。は静的な位置になっていません。

Answer 2

絶対配置された子要素のwidthとheightを100%に設定しないのはなぜですか。

thisあなたのフィドルのリミックスを参照してください。両方top及びbottom（又はleftとright両方、または4つすべての）が自動である場合