#2
チュートリアル

Tutorial 基礎編(中)

自分のための備忘録です。

絶対位置指定要素の親要素の高さ

絶対位置指定要素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になる(親の親の横幅いっぱいになる)
    • 子要素に他要素も持つ ===> 他要素のサイズによって高さがきまる(絶対位置要素の高さは考慮されない)

以下のソースの親要素の高さは0になる。

            
            <div style="position: relative">
                <div style="position: absolute;">
                    あいうえお。あいうえお。
                </div>
            </div>
            
            

Flexboxと高さ

親要素の高さを子要素の高さが長い場合はがはみ出す。
ただし、後続の要素の配置ははみ出した要素の影響をうけない。

あいうえお
あいうえお

上記の要素ははみ出します。
上記の要素ははみ出します。
上記の要素ははみ出します。
上記の要素ははみ出します。
上記の要素ははみ出します。

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