カテゴリ一覧から記事を探す

CSSのpositionの使い方!absoluteやfixedを使って表現の幅を増やそう!

CSSのpositionの使い方!absoluteやfixedを使って表現の幅を増やそう!

今回の記事では、CSSの重要なプロパティであるpositionについて解説していきます。

前回は、CSSの重要なプロパティであるmarginとpaddingについて解説しました。

前回同様、今回のプロパティもWebデザインをするうえで学習は必須ともいえるものですので、しっかりと基本を押さえておきましょう!

1.CSSのpositionで何ができる?

positionというプロパティを使えば、簡単に言えば「要素の配置方法を指定する」ことができます。

具体的に使う場面は、例えば以下のような部分になります。

  • 指定した分だけ要素を動かしたい
  • 要素の上に要素を重ねて表示したい
  • (ヘッダーなどを)画面のあるきまった位置に表示し続けたい

イメージが湧きにくいかもしれませんが、しっかりと解説していきますので、安心してください!

2.positionの書き方

positionの書き方は、基本的に

CSS
○○{
  position: 配置方法;
}

となります。

配置方法の部分には、主に以下の値が入ります。

positionの値

  1. static : 初期値で特に気にすることはない
  2. relative : 通常通り表示される位置を基準にして相対的な位置を決める
  3. absolute : ブラウザの表示領域または親要素を基準に絶対的な位置を決める
  4. fixed : 画面のあるきまった位置に固定(スクロールしても動かない)

余談:配置方法にstickyという値を指定することもできる

先ほど説明した4つの配置方法のほかに、position: sticky;とすることもできます。

使いどころが限られていて、使う場面も限られているので覚えなくてもOKです。

説明および使う場面が気になる方は、以下の記事を参考にしてみてください。

3.positionの使い方:要素をずらしてみよう

実際のpositionの使い方について説明していきます。

static(初期状態)以外にすれば、top,bottom,left,rightというプロパティが効くようになります。

それぞれ、上からの距離や右からの距離などを表します。

positionの使い方:要素をずらしてみよう

例えば、position: relative;を指定した状態で、top: 10pxleft: 5pxだと以下のようになります。

topとleftの使い方

左上を起点(基準)として、上から10px、左から5pxずれます。

では、bottom: 10pxright: 5pxを指定するとどうなるでしょうか。

bottomとrightの使い方

右下を起点(基準)として、下から10px、右から5pxずれる結果となりました。

 topとbottom、leftとrightを同時に使用することはないと思っていいです。

4.position : staticについて

topやleftなどで要素をずらすことができるんだな、と分かったところで、positionに指定できる主な4つの配置方法について解説していきます。

まずは、staticです。
これは、初期値であって、positionを指定しない状態では自動的にstaticになっています。

この初期状態では、topやleftなどが効きませんし、z-indexも効きません。
私も最初の頃要素が動かなくて悩んだことがあります。

z-indexとは何か?

先ほど出てきたz-indexとは、重なり順を表すプロパティです。

x座標やy座標にプラスして、z座標も追加できると思っていただければわかりやすいかもしれません。

CSS
.red{
  background: red;
  z-index: 3;
}

.blue{
  background: blue;
  z-index: 1;
}

.green{
  background: green;
  z-index: 2;
}

z-indexの数字が大きいほど、上側に表示されているというのが分かると思います。

簡単な説明なのでこれがすべてではないですが、初期状態だとz-indexは効かないということを覚えていただければと思います!

5.position : relativeについて

position: relative;を指定する場合、現在の位置から相対的に要素の位置を動かしたいときに使えます。

現在の位置から相対的に、というのは言い換えるとstatic(初期状態)だった場所から考えて要素を動かすという意味です。

position: relative;を適用させただけだと、見た目や位置に変化はなにもないのでわかりにくいのですが、適用させていればtopz-indexなども効くようになります。

6.position : absoluteについて

position: absolute;はよく使います。
使い方をマスターすれば、デザインの表現の幅がぐっと広がります。

例えば画像の上にアイコンを出したり、他の要素に重ねて配置することができるようになります!

CSS
/*実は、左上の「CSS」の文字もposition: absoluteを使って重ねて配置しています。*/

position: absoluterelativeの大きな違いがあります。

それは、absoluteは「起点からの絶対位置」を表すということ。(relativeは相対位置でした)

絶対位置とは数学で言う「絶対値」みたいなもので、原点からの距離で表されます。
absoluteを指定した要素は他の要素があろうがなかろうが、無視して配置をすることができます。

そのため、position: absoluteを指定すると他の要素を無視するので位置がずれます。

赤色はrelativeです。

青色はabsoluteです。

absoluteは文字を無視して配置されています。

HTML
赤色はrelativeです。
<div class="red"></div>
青色はabsoluteです。
<div class="blue"></div>
absolute(青色)は文字を無視して配置されています。
CSS
.red{
  position: relative;
  background: red;
}

.blue{
  position: absolute;
  background: blue;
}

文字を無視して配置された結果、文字と重なってしまっていますね。(見にくいので半透明にしています)

そのためabsoluteは他の要素と重ね合わせるような場面で使われることが多いです。

親要素にrelativeを指定して起点を変更する

デフォルトでは、起点はページ全体となっています。

position : absoluteについて

absoluteを指定した途端、要素が消えた→実はページの一番左上にあった。
なんてことも起きます。

デフォルトのままだと使いにくいのですが、親要素にrelativeかfixedを指定したら、起点は親要素となります!

親要素にrelativeを指定して起点を変更する

自分の思った通りにデザインしやすいのは親要素にrelativeまたはfixedが指定されている時なので、忘れないように指定するのをオススメします。

起点を親要素にするメリット

起点を親要素に合わせなければ、以下のような弊害が生じます。

起点を親要素に合わせるメリット

スマホ表示に合わせてCSSを変更したとしましょう。

スマホ表示とPC表示では行数が変わってしまい、同じ距離画面の左上からずらした結果、オレンジ色の要素が画面外にずれてしまう。

こんなことが起きてしまいますので、親要素にもrelativeかfixedをセットで指定することを忘れないようにしましょう!

7.position : fixedについて

最後に、position: fixedについて解説します。

これを適用すれば、特定位置に固定したままにすることができます。

ヘッダーやフッターによく使われていますね。

以下のgif画像では、タイトルを含めたヘッダーがスクロールしても上にずっとあるという状態になっています。

position : fixedについて

例えばこの時にtop: 50px;と指定すれば、ヘッダーは上から50px離れた部分で固定されたまま、ということになります!

使う場面は限られますが、どのサイトにも1度や2度は使う場面がありますので、覚えておきましょう!

8.まとめ

今回は要素の配置方法について、主に以下の4つについて解説しました!

positionの値

  1. static : 初期値で特に気にすることはない
  2. relative : 通常通り表示される位置を基準にして相対的な位置を決める
  3. absolute : ブラウザの表示領域または親要素を基準に絶対的な位置を決める
  4. fixed : 画面のあるきまった位置に固定(スクロールしても動かない)

慣れるまで思ったように位置取りをするのは難しいですが、手を動かしつつ学んでいきましょう!

次のステップ:要素に影を付けてみよう!