絶対位置指定要素absolutely positioned elementとは、 position の計算値が absolute 又は fixed である要素です。 top, right, bottom, left の各プロパティは、この要素の包含ブロックの辺からのオフセットを指定します。 (包含ブロックは配置される要素の祖先です。) 要素にマージンがある場合は、オフセットにマージンが追加されます。https://developer.mozilla.org/ja/docs/Web/CSS/position#Types_of_positioning
子要素に絶対位置指定要素しか持たない親要素の高さは0。
絶対位置指定要素は親要素のレイアウト処理から除外されるため。
ref.
position:
absolute;した親要素の高さがなくなるのを解消する一般的な(clearfixのような)方法はありませんか?
親要素の高さが取得できないのであって、絶対位置指定要素の高さがないわけではない。
以下のソースの親要素の高さは0になる。
<div style="position: relative">
<div style="position: absolute;">
あいうえお。あいうえお。
</div>
</div>
親要素の高さを子要素の高さが長い場合はがはみ出す。
ただし、後続の要素の配置ははみ出した要素の影響をうけない。
上記の要素ははみ出します。
上記の要素ははみ出します。
上記の要素ははみ出します。
上記の要素ははみ出します。
上記の要素ははみ出します。
<div style="background: #eee; height: 80px">
<div style="display: flex; height: 40px; background: #ddd">
<div style="height: 100px; margin-left: 5px; background: #0f0">
あいうえお
</div>
<div style="height: 100px; margin-left: 5px; background: #0f0">
あいうえお
</div>
<div style="height: 100px; margin-left: 5px; background: #0f0">
<img src="../images/example-320x160.png" />
</div>
</div>
</div>