absoluteにtopとbottomを同時に指定したらどうなるの？ [CSS]

position:absoluteは要素の配置を絶対位置で決められるプロパティです。

例えば「上から10px、左から10pxの位置に配置する」といったことができるようになります。

.abs{
    position : absolute;
    top : 10px;
    left : 10px;
}

ここで疑問に思うのは「上から10px、下から10px」を指定した場合です。

.abs{
    position : absolute;
    top : 10px;
    left : 10px;
    bottom : 10px;
}

いったいどのように処理されるのでしょうか？

topとbottomの両方を指定してみる。

こんな感じのhtml要素を考えてみます。親要素は赤い四角、その中に”absolute”の文字を描いています。

<div style="position:relative;background-color:#F00; width:100px; height:100px;">
<div class="abs">absolute</div>
</div>

子要素のdivに以下のスタイルを適応してみます。

見やすくするため、緑の背景色を指定しています。

.abs{
    position : absolute;
    top : 10px;
    left : 10px;
    bottom : 10px;
    background-color : #0F0;
}

結果としてはこんな感じになります。

absolute

topとbottomの値に合わせて、divの高さ(height)が自動調整されていますね。

では、子要素のdivに高さ(height)を予め指定してみるとどうなるでしょうか？

.abs{
    position : absolute;
    top : 10px;
    left : 10px;
    bottom : 10px;
    background-color : #0F0;
    height : 20px;
}

absolute

上(top)から10pxの位置に配置されますが、高さ(height)は維持されたまま、下(bottom)は無視されています。

MDNによれば

と定義されています。

思わぬレイアウト崩れにつながる仕様なので、知っておいて損はありませんね。