【徹底解説】cssのpositionとは？absoluteやfixedの方法と使用例を紹介

CSSには、「position」という要素の位置を決めるプロパティがあります。
positionプロパティを使うことで、ユーザーが使いやすく、見やすいサイトができます。

しかしこのpositionプロパティ、使い方で初心者はつまずく方が多くいます。

そうしたpositionプロパティの使い方をこの記事では、プログラミング学習初心者に向けて、図とサンプルコードを用いてわかりやすく説明していきます。

positionタグを使いこなすことで、レイアウトの崩れない素敵なサイトを作ることができるので、正しい使い方を学んでいきましょう！

1 cssの「position」とは？
2 セットで使う位置指定のプロパティ
3 「position」で取れる値の種類
4 positionの注意点
5 まとめ

cssの「position」とは？

まずはじめに、CSSのpositionがどういった役割なのか、どのようなことができるのかを説明していきます。

要素？プロパティとは？と思った方は、一度以下の記事でCSSの基本をおさらいしましょう！

WEBCAMP NAVI

【初心者向け】CSS（スタイルシート）基本の書き方を５ステップで解説

https://web-camp.io/magazine/archives/27010

Webサイトなどをデザインする際、文字の色や背景を付けて素敵なページにしたいですよね！そんな時に役立ってくるものが、「ホームページの形」を作る存在のCSSになります。今回の記事では、「CSSの基本が知りたい」「HTMLもCSSも初心者」そんな方に、CSSの役割や書き...

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

要素の配置を決めるpositionですが、どのように機能するのでしょうか。
主な使い方は以下の３種類があります。

要素を指定した分だけ動かす
要素の上に別の要素を重ねる
要素を画面の常に同じ位置に固定する

要素を指定した分だけ動かす

他の配置プロパティ同様、positionプロパティを設定すれば指定した分だけ要素を動かすことができます。

要素の上に別の要素を重ねる

positionプロパティを使えば、要素同士を重ねることができます。
その中で位置や重ね順も指定することができます。

要素を画面の常に同じ位置に固定する

また、画面をスクロールした際に同じ位置に止めることもできます。
サイトの上部にあるメニューバーなどがその例です。

「配置」を決めるプロパティの一つ

「position」はCSSで使うプロパティの中でも、特に要素の「配置」を決めるのが「position」の役割です。
CSSの中では以下のように書きます。

CSS

.要素セレクタ{
　position : 値
}

配置を決めるプロパティは「position」の他に、「float」や「display」といったプロパティがあります。
プロパティはデザインの目的に沿って使い分ける必要があるため、それぞれの特性を知ることが大切です。
今回はpositionプロパティの解説ですので、他のプロパティについては深く知る必要はありませんが、頭の隅で覚えておくと役にたつかと思います。
下の表を今後の参考にしてみてください。

プロパティ名	メリット	デメリット
position	・配置の細かな指定向き・特に要素を重ねる場合に向いている	・画面サイズの変更による調整が難しい・設計に失敗すると画面の大きさの違いにより要素同士が重なる
float	・横並びなど単純なレイアウト作成、小さな変更向き・要素が重なる心配はない	・ページの構成に影響する複雑な配置には向かない
display	・横並び、縦並びなど単純なレイアウト作成、小さな変更向き・floatより様々な値のオプションが用意されており、使用の幅がある	・複雑な配置には向かない

セットで使う位置指定のプロパティ

positionを使うことでデザインの幅が広が広がります。

それでは具体的な内容に入っていきましょう！
まずはpositionプロパティと一緒に使う具体的に位置を指定するプロパティを説明しておきます。

top/bottom/right/leftで位置指定

まずはpositionプロパティで、要素が動く基準（起点）を決めます。
基本的にはtop/bottom/right/leftプロパティで具体的な位置を調整する

topは基準の上部、bottomは下部、rightは右側、leftは左側からの距離を指定します。

z-indexで重ね順を指定

また、positionは要素同士を重ねることができる場合があります。
その際には、「z-index」を用いて要素同士の重なる順番を指定することができます。
「z-index : 数字（整数）」で指定した値が大きい要素ほど上に表示されます。

「position」で取れる値の種類

プロパティは取る値によって、要素の効果が変わってきます。

positionプロパティで取ることができる値は以下の５種類です。

	区別	値
位置指定無効	ー	static
位置指定有効	相対配置	relative
	絶対配置	absolute
	絶対配置	fixed
	相対配置×絶対配置	sticky

それでは順を追って見ていきましょう。

デフォルトはstatic

「position」は、何もしなければデフォルトである「static」をとります。
基本的に「static」を指定することはありません。
そのため意識することのない値なのですが、以下のことを頭に入れておきましょう。

それは位置を変更ができないということです。
そのため、positionプロパティが「static」の場合、top/bottom/right/leftなどの位置を変更するプロパティを使用しても効果は発揮されません。

また、要素の重なり順を指定することができません。
要素の重なり順を決めるプロパティである「z-index」使っても、重なり順を変えられないのです。

位置や重なり順を変えたいときは、positionの値をrelativeやabsoluteにします。

現在の位置を起点に動くrelative

現在の位置（左上）を起点に要素の位置を動かすことができます。
この配置のことを相対配置と言います。
relativeの指定だけではなく、同時にtop/bottom/right/leftという値も指定することで要素の位置を変更することが可能です。

CSS

.要素セレクタ {
    position: relative;
    top: 10px;    left: 20px
}

親要素を起点に動くabsolute/fixed

absolute

最も近い「relative」(親や先祖の要素)を起点に要素の位置が動きます。
このように、現在の位置ではなく、特定の要素を起点に配置をすることを絶対配置と言います。
absoluteだけでは具体的な位置が指定できません。
そのため、relative同様にtop/bottom/right/leftプロパティを指定することが必要です。
relativeを指定していなければ起点はページ全体となります。

CSS

.親要素 {
    position: relative;
}
.子要素 {
  position: absolute;
  top: 10px;
  left: 10px;
}

fixed

この値は、常に画面に固定したいものがある場合に使います。
サイトの上部に出てくるメニューバーなどに使われています。
fixedは、absoluteと同様に絶対配置です。
しかし違う点としては、基準位置（起点）は常にブラウザウィンドウ領域であることです。
具体的な位置はtop/bottom/right/leftプロパティで指定します。

CSS

セレクタ{
    position: fixed;
}

上記の状態で画面をスクロールしても、固定されている要素の位置は変わりません。

相対配置×絶対配置のsticky

stickyは、スクロールに応じて要素を固定する時に使います。
粘着位置指定要素とも呼ばれ、性質はrelative、absolute、fixedに共通する部分があります。
指定した値を超えるまではrelativeのように配置され、越えるとfixedのようにスクリーン場で固定、最後にはabsoluteで他の要素と重なり固定するいった感じです。
もちろん位置や重なり順の指定も可能になります。