CSSのpositionを使いこなせるようになろう！

今回はweb製作に欠かせない、ボックスの配置を変更するpositionについてです。プロパティの指定方法などの基礎知識から使用例まで解説していきたいと思います。

そもそもpositionとは何なのか

ポジションという名前の通り、要素の場所を指定できるプロパティです。

• 要素を少しズラしたいとき
• 要素の位置を固定したい時

などに使用できる、汎用性の高い万能なプロパティです。その分少し癖があり、慣れるまでは難しいかもしれませんが、一つ一つ紐解いて行きましょう。

positionの使い方

.class {
  position: 値;
}

.class {
position: relative:
top: 10px; //上から10px
left: 50px; //左から50px
}

２ステップで自由なレイアウトが思いのまま！

それでは、ここからはpositionのそれぞれのプロパティについて詳しく説明していきます。

position: static;

まずは初期値であるstaticから。

BOX1を下に50px動かしたい場合、先ほどのステップに沿って考えるとコードはこうなるはずですが、実際にやってみると動きません。

<div class="box">BOX1</div>

.box {
  position: static; //初期値なので書く必要はない
  top: 50px;
}

staticは、分かりやすく言えば動かせないプロパティです。

z-indexも効かない

また、positionがstaticのままだと、要素の重なり順を変更するz-indexも適用されません。

staticは初期値なので、プロパティに指定しても要素を動かすことはできません！絶対に動かない頑固者だと覚えましょう

position: relative;

そこで登場するのがrelativeです。

relativeを使えば、現在の位置（本来表示される位置）から指定して動かすことができます。

STEP

relativeを指定

.box {
  position: relative;
}

STEP

位置を指定（今回は上から50px）

.box {
  position: relative;
  top: 50px;
}

本来表示される位置（元々要素のあった位置）からtop、bottom、right、leftをそれぞれ指定します。

position: absolute;

rerativeよりもっと柔軟に表現できるのがabsoluteです。absoluteを使用すれば、親要素に対しての位置を指定することができます。

<div class="box-parent">
　　<div class="box-child">child</div>
</div>

親要素box-parentの中にbox-childが入っているこちらを例にして説明します。

STEP

親要素・子要素それぞれにpositionを指定する

.box-parent {
  position: relative;
}

.box-child {
  position: absolute;
}

親要素にrelative、子要素にabsoluteを指定します

STEP

位置を指定（今回は右から30px、下から30px）

.box-parent {
  position: relative;
}

.box-child {
  position: absolute;
  right: 30px;
  bottom: 30px;
}

absoluteを使用すると、親要素にpaddingがあっても無視されます。ただし、子要素にmarginが指定されている場合は反映されるので注意してください。

position: fixed;

fixedを指定すると、ウィンドウ全体からの位置で指定することができます。そして最大の特徴が、スクロールしても位置が変わりません。

よく使われるのがヘッダーやページトップへ戻るボタンです。当ブログでも使用しています。

STEP

fixedを指定

.header{
position: fixed;
}

.page-top{
position: fixed;
}

STEP

位置を指定

.header{
position: fixed;
top: 0;
left: 0;
}

.page-top{
position: fixed;
right: 50px;
bottom : 50px;
}

width、heightはそれぞれ必要に応じて指定してください。

fixedと固定する位置を指定することにより、スクロールしても追従する要素の完成です！

まとめ

どこを基準にして移動させるかでrelative、absolute、fixedを使い分けます。

慣れてしまえば、おしゃれなレイアウトも思いのままに作ることができます。ぜひチャレンジしてみてください！