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

今回はCSSのpositionプロパティについて解説していきます。基礎知識から「具体的にどのように使えるのか」というところまでみっちり解説します。

1. CSSのpositionとは？

positionとはものすごくざっくりというと「要素の位置を決める」ためのプロパティです。

要素とは？

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

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

たとえば「要素の位置を20pxだけ右に動かす！」というようなことができたり…

要素の上に別の要素を重ねてのせることができたり…（この図は画像の上に要素をのせるイメージです）

また画面の決まった位置に要素を固定して表示させることができたりします。

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

positionの書き方

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

.test { position: relative; }

◯◯にはセレクタが入ります（セレクタとは？）。ここではstatic・relative・absolute・fixedの4つを扱います。ほかに、スクロールに応じて位置を固定するstickyもあります。

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

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

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

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

考え方はこの図のようになります。基準からの距離で指定するわけですね。

• top：基準の上からの距離
• bottom：下からの距離
• left：左からの距離
• right：右からの距離

たとえば、position: relativeなどを指定した.testを元の位置から下へ10px動かすなら、.test { position: relative; top: 10px; }と書きます。staticの要素にはtopなどの指定は効きません。

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

topやleftなどは基本的に２つを組み合わせて使います。以下の図は、位置指定した親要素を基準にするabsoluteの例です。relativeでは元の表示位置からずらすため、同じ値でも基準が異なります。

たとえば、top:10pxとleft:10pxと指定した要素は、基準の左上から右に10px、下に10pxの位置に配置されます。

top:0とleft:0にした場合は、基準の左上にぴったりとくっつきます。

また、bottom:10pxとright:10pxを指定された要素は、右下から上に10px、左に10pxの位置に配置されます。

bottomとrightを0にした場合は、基準の右下にぴったりとくっつきます。

leftとright、またはtopとbottomを両方指定することもできます。※ 結果は配置方式や幅・高さの指定によって変わります。絶対配置の要素で左右をともに0にすると、幅が自動なら左右に広がります。

3. staticとは？

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

特徴

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

staticは位置が変えられない

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

通常のstatic要素ではz-indexが効かない

z-indexは要素の重なり順を指定します。staticの通常の要素には効きませんが、flex・gridの子要素などには位置指定がなくても効きます。初期値はautoであり、0ではありません。

4. position: relative

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

このように本来の表示位置から、右と下に10pxずつ動かすというようなことができるわけですね。

使用例

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

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

p { width: 80px; height: 50px; line-height: 50px; background: #74c1f8; }
#relative { position: relative; top: 10px; left: 10px; }

解説

本来の表示位置が基準になり、上から10px（top:10px）、左から10px（left:10px）だけ移動したわけですね。

staticとrelativeの違い

position: relativeとしても、top・bottom・left・rightを指定しなければ元と同じ位置に表示されます。ただし、オフセットで位置を動かしたり、z-indexで重なり順を指定したりできます。また、絶対配置する子要素の基準を作る用途もあります。

5. position: absolute

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

absoluteでは要素が通常の配置から外れ、最も近い位置指定された祖先などが作る包含ブロックを基準に配置されます。この例では親要素にposition: relativeを指定し、その左上から下へ10px、右へ10pxの位置に置けます。

absoluteにした要素は通常の配置から外れるので、後続の要素はその場所を空けません。位置によってはほかの要素と重なります。例を見てみましょう。

使用例

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

position指定なしの場合

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

.parent { background: #ececec; padding: 20px 10px; margin: 10px; }
.parent p { width: 80px; height: 30px; line-height: 30px; margin: 0 0 10px; }
.parent p:first-child { background: #ffc778; }
#absolute { background: #74c1f8; }

要素②をabsoluteにした場合

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

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

.parent { background: #ececec; padding: 20px 10px; margin: 10px; }
.parent p { width: 80px; height: 30px; line-height: 30px; margin: 0 0 10px; }
.parent p:first-child { background: #ffc778; }
#absolute { background: #74c1f8; }
.parent { position: relative; }
#absolute { position: absolute; top: 0; left: 0; }

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

解説

もしtopとleftの値を指定した場合は、親要素の左上が基準点となります。両方0の場合は、親要素の左上にピッタリとくっつきます。

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

親要素はrelativeにしておく

この例では親要素のposition: relativeが配置の基準を作ります。親要素が基準を作らない場合は、位置指定やtransformなどを持つ別の祖先が基準になることがあります。absoluteのたびに必ず親へ指定するわけではありません。

absoluteの便利な使い方

これは記事公開当時のサルワカのトップページの例です。写真上にカテゴリ名を重ねる配置はabsoluteで作れます。

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

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

HTMLコード

<div class="bear-example">
  <img src="https://saruwakakun.com/wp-content/uploads/2017/02/bdrMIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg" alt="クマの写真" width="450" height="344" />
  <span>クマさん</span>
</div>

CSSコード

.bear-example { position: relative; width: min(450px, 100%); }
.bear-example img { display: block; width: 100%; height: auto; }
.bear-example span { position: absolute; color: white; background: #74c1f8; padding: 0 2px; line-height: 1.5; }
.bear-example span { bottom: 0; right: 0; }

ブラウザ表示

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

位置を変えてみる

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

HTMLコード

<div class="bear-example">
  <img src="https://saruwakakun.com/wp-content/uploads/2017/02/bdrMIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg" alt="クマの写真" width="450" height="344" />
  <span>クマさん</span>
</div>

CSSコード

.bear-example { position: relative; width: min(450px, 100%); }
.bear-example img { display: block; width: 100%; height: auto; }
.bear-example span { position: absolute; color: white; background: #74c1f8; padding: 0 2px; line-height: 1.5; }
.bear-example span { bottom: 10px; right: 10px; }

ブラウザ表示

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

6. position: fixed

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

スクロールしても位置が変わらないメニューバーやソーシャルボタンを表示したいときなんかに使うと便利です。

このGIFは記事公開当時の固定タイトルバーの表示例です。上端へ固定する基本形はposition: fixed; top: 0です。

通常、fixedの基準は画面の表示領域です。そのためこの例ではtop: 0で画面上端に配置され、スクロールしても同じ場所に見えます。ただし祖先にtransformなどがある場合、その祖先が基準になることがあります。

使用例

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

HTMLコード

<div class="fixed-scroll">
  <p>これは文章です。</p>
  <p>これは文章2です。</p>
  <p>これは文章3です。</p>
  <p>これは文章4です。</p>
  <p>これは文章20です。</p>
</div>
<p id="fixed">fixed</p>

CSSコード

.fixed-scroll { min-height: 500px; padding: 56px 12px 12px; background: #f6f6f6; }
#fixed { position: fixed; top: 0; left: 0; margin: 0; width: 100%; padding: 8px 12px; background: #ffc778; color: #333; }

ブラウザ表示

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