本文へ移動
相談する無料チェックしてみる

トップお知らせ・ブログCSSのpositionプロパティの使い方

CSSのpositionプロパティの使い方

デザイン・技術読了時間：約3分

画像の上に文字を重ねたい、画面の右下にボタンを固定したい。
そんなときに使うのが、CSSの「position」というプロパティです。

この記事では、positionの5つの値の違いと、よく使う組み合わせを解説します。

1.位置の決め方を変える

positionは、要素をどこを基準に、どう配置するかを決めるプロパティです。主な値は次の5つです。

値どう配置されるかよく使う場面
staticふつうの並び（初めの設定）特に指定しないとき
relative本来の位置から、少しずらす。absolute の基準にもなるabsolute の基準にする
absolute基準の箱の中で、決めた位置に置く画像の上に文字やラベルを重ねる
fixed画面に対して固定する。スクロールしても動かない右下のボタン、上に固定するヘッダー
stickyスクロールして決めた位置に来ると、そこで止まるスクロールについてくる見出しや目次

位置は、top・right・bottom・left で指定します。

2.positionを知っておくとよい理由

ホームページの多くの要素は、ふつうは上から順に並びます。positionを使うと、その並びとは別に、要素を重ねたり、画面に固定したりできます。

一方で、使い方を間違えると、要素がずれたり、ほかの要素と重なって隠れたりする原因になります。基準がどこなのかを理解しておくことが大切です。

positionで大切なのは、どこを基準に位置を決めているかを意識することです。

3.よく使う組み合わせ

画像の上にラベルを重ねる（relative と absolute）

.card {
  position: relative;
}

.card__label {
  position: absolute;
  top: 8px;
  left: 8px;
}

親の箱に relative を指定すると、absolute の子は、その親を基準に配置されます。親に指定がないと、さらに外側の箱や、ページ全体を基準にしてしまい、思わぬ場所に表示されます。

画面の右下にボタンを固定する（fixed）

.float-button {
  position: fixed;
  right: 16px;
  bottom: 16px;
}

スクロールでついてくる目次（sticky）

.toc {
  position: sticky;
  top: 80px;
}

つまずきやすいポイント

  • absolute の要素がずれる：基準にしたい親に relative を指定しているか確かめる
  • sticky が効かない：親の箱に overflow: hidden などが指定されていないか確かめる
  • fixed の要素が、ほかの要素の下に隠れる：重なりの順番（z-index）を確かめる
  • absolute や fixed の要素は、ふつうの並びから外れるため、ほかの要素と重なることがある

4.よくある質問

relative だけ指定しても、見た目は変わりませんか？

top などを指定しなければ、見た目は変わりません。主に、absolute の基準にするために使います。

fixed のボタンが、スマートフォンで邪魔になります。

スマートフォンでは小さくする、位置を変える、スクロールしたときだけ出す、などの工夫があります。

重なった要素の、前後の順番を変えたいです。

z-index というプロパティで変えられます。詳しくは、z-index が効かない原因と解決方法で紹介しています。

position を使わずに配置できますか？

並べるだけなら、FlexboxやGridの方が向いています。position は、重ねたり固定したりするときに使いましょう。

5.まとめ

positionは、要素をどこを基準に、どう配置するかを決めるプロパティです。

  • 重ねるときは、親に relative、子に absolute
  • 画面に固定するなら fixed、途中で止めるなら sticky
  • absolute がずれたら、基準の親を確かめる
  • 並べるだけなら、FlexboxやGridを使う

重なりの順番については、CSSのz-indexが効かない原因と解決方法で解説しています。

要素の重なりや、位置のずれで困っている場合は、浅草Web屋にご相談ください。

相談する

関連記事