今回の記事では、CSSの重要なプロパティであるpositionについて解説していきます。
maipyon
前回の記事↓では、CSSの重要なプロパティであるmarginとpaddingについて解説しました。
【レスポンシブにも】CSSのmarginとpaddingの使い方！複雑な関係性をおさえよう！
CSSのmarginとpaddingの使い方(余白設定)について誰でも分かるように解説します。レスポンシブサイトを作る際には特に必須になってきますので、しっかりと確認しておきたいところです。
前回同様、今回もWebデザインをする上で学習は必須ですので、しっかりと基本を押さえておきましょう！
この記事の目次
CSSのpositionで何ができる？
positionというプロパティを使えば、簡単に言えば「要素の配置方法を指定する」ことができます。
具体的に使う場面は、例えば以下のような部分になります。
- 指定した分だけ要素を動かしたい
- 要素の上に要素を重ねて表示したい
- （ヘッダーなどを）画面のあるきまった位置に表示し続けたい
イメージが湧きにくいかもしれませんが、図解付きでしっかりと解説していきますので、安心してください！
CSSでのpositionの書き方
positionの書き方は、基本的に
○○{
position: 配置方法;
}
となります。
配置方法の部分には、主に以下の値が入ります。
positionの値
- static : 初期値で特に気にすることはない
- relative : 通常通り表示される位置を基準にして相対的な位置を決める
- absolute : ブラウザの表示領域または親要素を基準に絶対的な位置を決める
- fixed : 画面のあるきまった位置に固定（スクロールしても動かない）
余談：配置方法にstickyという値を指定することもできる
先ほど説明した4つの配置方法のほかに、position: sticky;とすることもできます。
使いどころが限られていて、使う場面も限られているので覚えなくてもOKです。
サイドバーをスクロール追従させるときなんかに使いますね。
詳しくは、【CSSだけで】サイドバーをスクロール追従させる方法の記事を参考にしてみてください。
positionの使い方：要素をずらしてみよう
実際のpositionの使い方について説明していきます。
static（初期状態）以外にすれば、top,bottom,left,rightというプロパティが効くようになります。
それぞれ、上からの距離や右からの距離などを表します。
例えば、position: relative;を指定した状態で、top: 10pxでleft: 5pxだと以下のようになります。
左上を起点（基準）として、上から10px、左から5pxずれます。
では、bottom: 10pxでright: 5pxを指定するとどうなるでしょうか。
右下を起点（基準）として、下から10px、右から5pxずれる結果となりました。
position : staticについて
topやleftなどで要素をずらすことができるんだな、と分かったところで、positionに指定できる主な4つの配置方法について解説していきます。
まずは、staticです。
これは、初期値であって、positionを指定しない状態では自動的にstaticになっています。
この初期状態では、topやleftなどが効きませんし、z-indexも効きません。
私も最初の頃要素が動かなくて悩んだことがあります。
z-indexとは何か？
先ほど出てきたz-indexとは、重なり順を表すプロパティです。
x座標やy座標にプラスして、z座標も追加できると思っていただければわかりやすいかもしれません。
.red{
background: red;
z-index: 3;
}
.blue{
background: blue;
z-index: 1;
}
.green{
background: green;
z-index: 2;
}
z-indexの数字が大きいほど、上側に表示されているというのが分かると思います。
簡単な説明なのでこれがすべてではないですが、初期状態だとz-indexは効かないということを覚えていただければと思います！
position : relativeについて
position: relative;を指定する場合、現在の位置から相対的に要素の位置を動かしたいときに使えます。
現在の位置から相対的に、というのは言い換えるとstatic(初期状態)だった場所から考えて要素を動かすという意味です。
position: relative;を適用させただけだと、見た目や位置に変化はなにもないのでわかりにくいのですが、適用させていればtopやz-indexなども効くようになります。
maipyon
でも、positionを指定していないと動かせないという誰もが陥る罠・・・。
position : absoluteについて
position: absolute;はよく使います。
使い方をマスターすれば、デザインの表現の幅がぐっと広がります。
例えば画像の上にアイコンを出したり、他の要素に重ねて配置することができるようになります！
/*実は、左上の「CSS」の文字もposition: absoluteを使って重ねて配置しています。*/
position: absoluteとrelativeの大きな違いがあります。
それは、absoluteは「起点からの絶対位置」を表すということ。（relativeは相対位置でした）
絶対位置とは数学で言う「絶対値」みたいなもので、原点からの距離で表されます。
absoluteを指定した要素は他の要素があろうがなかろうが、無視して配置をすることができます。
そのため、position: absoluteを指定すると他の要素を無視するので位置がずれます。
赤色はrelativeです。
青色はabsoluteです。
absoluteは文字を無視して配置されています。
赤色はrelativeです。 <div class="red"></div> 青色はabsoluteです。 <div class="blue"></div> absolute(青色)は文字を無視して配置されています。
.red{
position: relative;
background: red;
}
.blue{
position: absolute;
background: blue;
}
文字を無視して配置された結果、文字と重なってしまっていますね。（見にくいので半透明にしています）
そのためabsoluteは他の要素と重ね合わせるような場面で使われることが多いです。
親要素にrelativeを指定して起点を変更する
デフォルトでは、起点はページ全体となっています。
absoluteを指定した途端、要素が消えた→実はページの一番左上にあった。
なんてことも起きます。
デフォルトのままだと使いにくいのですが、親要素にrelativeかfixedを指定したら、起点は親要素となります！
自分の思った通りにデザインしやすいのは親要素にrelativeまたはfixedが指定されている時なので、忘れないように指定するのをオススメします。
起点を親要素にするメリット
起点を親要素に合わせなければ、以下のような弊害が生じます。
スマホ表示に合わせてCSSを変更したとしましょう。
スマホ表示とPC表示では行数が変わってしまい、同じ距離画面の左上からずらした結果、オレンジ色の要素が画面外にずれてしまう。
こんなことが起きてしまいますので、親要素にもrelativeかfixedをセットで指定することを忘れないようにしましょう！
position : fixedについて
最後に、position: fixedについて解説します。
これを適用すれば、特定位置に固定したままにすることができます。
ヘッダーやフッターによく使われていますね。
以下のgif画像では、タイトルを含めたヘッダーがスクロールしても上にずっとあるという状態になっています。
例えばこの時にtop: 50px;と指定すれば、ヘッダーは上から50px離れた部分で固定されたままにできます！
使う場面は限られますが、どのサイトにも1度や2度は使う場面がありますので、覚えておきましょう！
CSSのpositionについてのまとめ
今回は要素の配置方法について、主に以下の4つについて解説しました！
positionの値について
- static : 初期値で特に気にすることはない
- relative : 通常通り表示される位置を基準にして相対的な位置を決める
- absolute : ブラウザの表示領域または親要素を基準に絶対的な位置を決める
- fixed : 画面のあるきまった位置に固定（スクロールしても動かない）
慣れるまで思ったように位置取りをするのは難しいですが、手を動かしつつ学んでいきましょう！
