[CSS]positionプロパティについてのまとめ。

Webサイトの配置決めで頻出するpositionプロパティ。

positionプロパティをしっかり抑えておくと、要素の配置に頭を悩ませることもなくなるかもしれません。

CSSのpositionプロパティがうろ覚えの人はこの機会にしっかり抑えておきましょう。

positionとは？

CSSのpositionプロパティとは、要素の場所を決めることができるプロティです。

例えば、よく海外のWebデザインなどで使われる、トップ画像の中央にテキストが入ったデザイン。

この中央の要素はpositionプロパティ(absolute)を使って設定しています。

そのほかにも、ヘッダーやフッターを固定で表示したりもできます。

positionの種類

要素の配置には必須のプロパティですが、positionには4つの種類があります。

• static:初期値
• relative:英語で相対という意味。相対的に位置を決める
• absolute:英語で絶対という意味。親要素を基準に絶対的に位置を決める
• fixed:要素を基準にするのではなく、画面を基準に位置を決める

この中で実際に使うことの多いのはabsoluteでしょうか。

先ほど紹介したデザインでも、absoluteで絶対的に位置を決めてテキストを中央に配置しています。

fixedは例えば、スマホ画面の1番下に問い合わせボタンを設置する時などに使えます。

ナビゲーションメニューを上部に固定という使い方もできますね。

positionで使える値

positionプロパティでは以下のように値を設定して使用します。

.sample { 　
    position:absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

使うのは、top/bottom/left/right。

これは、トップからいくら離れているのか、ボトム (下側)からいくら離れているのかを設定します。

例えば0に設定すると上部からの距離が0となりぴったりくっつくように表示されます。

これ以外にpxで指定したり、%で指定することもできます。