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)は無視されています。
heightを指定するとbottomは無視される
MDNによれば
- heightが指定されていない場合には、topとbottomの両方が適応される。
- heightが指定された場合には、bottomプロパティが無視される。
と定義されています。
思わぬレイアウト崩れにつながる仕様なので、知っておいて損はありませんね。