[CSS]要素を柔軟に配置するプロパティ「position」

要素の配置を決めるプロパティに「position」というものがあります。positionプロパティに指定できる値には、以下のようなものがあります。

static	特に配置方法を指定しない（初期値）
relative	相対位置への配置
absolute	絶対位置への配置。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準、親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準となる。
fixed	絶対位置への配置。スクロールしても位置が固定されたままとなる。

それぞれの値の特徴をご説明いたします。

relative

staticは特に説明は不要だと思いますので、relativeからご説明します。relativeはもともと表示される場所からの位置を指定して要素を配置します。

#position1{
position:relative;
top:100px;
left:50px;
}

上記の例では、positionでrelativeを指定してtopとleftを記述しているので、もともと表示されていた場所の上(top)から100px、左(left)から50pxずらした位置に表示されます。

なお、relativeを指定した場合、もともと表示されるはずだった場所には空白ができます。

absoluteは、子要素に対して親要素を基準にずらして表示したい時によく使われます。その場合、親要素にrelativeを指定し子要素にabsoluteを指定します。ちょっとわかりにくいですが、”親要素の左上を基準に配置する”と考えればOKです。

#position1{
position:relative;
}

#position2{
position:absolute;
left:50px;
}

上記の例だと、親要素のposition1にはrelativeを指定して、子要素のposition2にabsoluteを指定することで、position2が親要素の左上を基準に左から50pxずらして表示されます。

absoluteを指定すると、もともと表示されるはずだった場所には、次の要素が詰めて表示されます。

fixedは、配置の考え方はabsoluteと同じですが、スクロールしたりブラウザの大きさが変わっても位置は固定されたままになります。

例えば、以下のようにスタイルを指定すると、ブラウザの右下にposition3が固定されて表示されます。試してみるとすぐ理解できると思いますので、実際にやってみてください。


#position3{
position:fixed;
right:0;
bottom:0;
}

positionプロパティを使うと、柔軟なレイアウトを実現できるようになりますので、ぜひ覚えて素敵なデザインに仕上げましょう。