CSSのpositionを総まとめ！absoluteやfixedの使い方は？

1. CSSのpositionとは？

要素とは？

どんな使い方ができるの？

このpositionプロパティは具体的にどのようなときに使うのでしょうか。

それぞれの方法はこれから紹介していきます。

positionの書き方

positionプロパティはCSSで以下のように書きます。

◯◯にはセレクタが入ります（セレクタとは？）。値には次の4つのどれかを指定します。

たとえば、class名が”test”の要素の相対的な位置を指定したいときには、.test {position: relative}というように書くわけですね。それぞれの値の意味はのちほど解説するので、この段階で理解する必要はありません。

2. positionとセットで使うtop・bottom・left・right

positionは基本的にtop、bottom、left、rightというプロパティとセットで使います。イメージとしては、以下のようになります。

ではこのtopやらbottomやらにはどのような意味があるのでしょうか。

たとえば、基準の上からの距離を10pxにしたいときは.test {top: 10px}というように書きます。

「この基準の位置をどうするか」というのをさきほどのpositionプロパティで決めるわけです。

基本的にこのうちの２つを使う

topやleftなどは基本的に２つを組み合わせて使います。少し例を見てみましょう。

leftとright、またはtopとbottomを同時に指定することは殆どありません。※ ちなみにtopとbottomを同時に0に指定すると要素は縦いっぱいに広がります。leftとrightを同時に0にすると要素は横いっぱいに広がります。

3. staticとは？

ここからはpositionの値ごとにどのような位置指定ができるのかを解説していきます。まずposition: staticから見ていきましょう。

特徴

基本的にstaticを指定することはありません。そのためあまり意識することのない値なのですが、以下のことを頭に入れておきましょう。

staticは位置が変えられない

top:10pxなどと指定しても効きません。位置を変えたいときはrelativeやabsoluteにしましょう。

z-indexを指定できない

z-indexとは要素の重なり順を決めるプロパティです。staticではz-index:0の状態になっており、変えることができません。

CSSのpositionを総まとめ！absoluteやfixedの使い方は？

4. position: relative

position: relativeは現在の表示位置から相対的に要素の位置を動かしたいときに使います。

使用例

実際にコードを書いて指定してみましょう。要素をposition: relativeにしたうえでtopとleftをそれぞれに10pxに指定してみます。分かりやすくするために指定なしの要素も作ることにします。

<p>指定なし</p>
<p id="relative">relative</p>

#relative {
  position: relative;
  top: 10px;
  left: 10px;
}
/*装飾は省略*/

解説

staticとrelativeの違い

position:relativeとしても、topやbottomを指定しなければstaticと同じ位置に表示されます。そのため一見同じように感じられますが、①位置調整の可否や②z-index指定の可否という違いがあります。「z-indexやtopなどが指定できないときはrelativeにする！」とおぼえておくと良いでしょう。

5. position: absolute

position: absoluteを使うとデザインの幅がぐっと広がるので、使い方を覚えておくことをおすすめします。

この「絶対的な位置」というのは、要素がどんな形であろうと、間に他の要素や余白が入っていようと、その位置に配置してくれるということ意味します。これは例を見てみるのが早いかもしれません。

使用例

"parent"というclass名の親要素の中に要素①と要素②を入れてみました。まず何も指定しなかった場合は以下のように表示されます。

position指定なしの場合

<div class="parent">
  <p>要素①</p>
  <p id="absolute">要素②</p>
</div>

要素②をabsoluteにした場合

要素②をabsoluteにしたうえでtopとleftを0にしてみましょう。

<div class="parent">
  <p>要素①</p>
  <p id="absolute">要素②</p>
</div>

.parent {
  /*親要素はrelativeに*/
  position: relative;
  padding: 20px;
}
#absolute {
  position: absolute;
  top: 0;
  left: 0;
}
/*装飾は省略*/

親要素の左上にぴったりとくっつきました。

解説

逆にbottom:0とright:0と指定すれば、親要素の右下にピッタリとくっつくことになります。またabsoluteは絶対的な位置指定です。そのため他の要素があろうと表示位置は変わらず重なって表示されるのですね。

親要素はrelativeにしておく

absoluteを使って位置調整するときは、親要素にposition:relative（もしくはfixed）を指定しておきましょう。これを忘れると基準位置がずれて思ったように表示されません。absoluteを使うときは、おまじないのように親要素もセットで変えるようにしましょう。

absoluteの便利な使い方

画像の上に要素を重ねてみよう

実際にabsoluteで画像の上に文字をのせるCSSを書いてみます。ここではbottomとrightを0にすることで右下にのせてみましょう。

<div id="example">
  <img src="bear.jpg"/>
  <span>クマさん</span>
</div>

/*親要素*/
#example {
  position: relative;
  /*要素内の余白は消す*/
  padding:0;
}
/*文字*/
#example span {
  position: absolute;
  bottom: 0;
  right: 0;
  /*以下装飾*/
  color: white;
  background: #74c1f8;
  padding:0 2px;
  line-height:1.5;
}

画像の右下にクマさんと表示されましたね。親要素はdivで画像（img）ではありませんが「親要素内にピッタリはまった画像の上に文字がのった」というイメージです。

位置を変えてみる

たとえばbottomとrightをそれぞれ10pxに変えてみます。

/*略*/
/*文字*/
#example span {
  position: absolute;
  bottom: 10px;
  right: 10px;
  /*略*/
}

画像の右下から上に10px、左に10pxの位置に文字が配置されました。

値にはマイナスの値を指定することもできます。親要素からあえてはみ出させたいときに使えるテクニックですね。

6. position: fixed

最後はfixedです。これは画面の決まった位置に要素を固定させたいときに使います。

absoluteと指定方法がほとんど同じですが、位置の基準は親要素ではなく「ウィンドウ全体」です。そのため、要素の位置に関係なくtop: 0と指定したら画面の最上部に表示されます。

使用例

ある要素を画面の上部に常に表示するようにしてみましょう。

<p>これは文章です。</p>
<p>これは文章2です。</p>
.
.
.
<p>これは文章20です。</p>

<p id="fixed">fixed</p>

#fixed {
  position: fixed;
  /*基準を画面の左上に*/
  top: 0;
  left: 0;
  /*余白が入らないように*/
  margin: 0;
  /*以下装飾*/
  width: 100%;
  background: #FFC778;
  color:white;
}

スクロールしても常に上側に要素を固定することができました。このように何かを固定するときにfixedは使えるのですね。