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

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

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

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

無料カウンセリングに申し込む

cssの「position」とは？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「HTML・CSS」をマスターして、自分でホームページやWEBアプリを作成できるようになりたい方へ！
国内最大級のプログラミングスクール【DMM WEBCAMP】

✔受講生の97%が未経験からのスタート！
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる！
✔分からないことは、講師にチャットやビデオ通話で好きなだけ質問可能！

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

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

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

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

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

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

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

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

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

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

absolute

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

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

fixed

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

セレクタ{
    position: fixed;
}

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

相対配置×絶対配置のsticky

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

「HTML・CSS」をもっと詳しく学習したい方へ！
国内最大級のプログラミングスクール【DMM WEBCAMP】

✔受講生の97%が未経験！
✔分からないことは、チャットやビデオ通話で講師に好きなだけ質問可能！
✔通学不要！スキマ時間でプログラミング学習ができる！

＼経済産業省認定の圧倒的カリキュラム／

positionの注意点

初心者がつまずきやすい「position」。
しかし、前の章で紹介したようなcssで画面のレイアウト考える上で重要な値を指定できるセレクタです。
positionセレクタを使いこなせるだけで、サイトがグッと見やすく・使いやすくなります。

そこでpositionを使う際に気をつけるべき注意点をお教えします。

どこが起点になるのかを意識する

よく初心者がpositionを使っていてわからなくなる原因は、どこが起点になっているのかわからなくなっているケースがほとんどです。

例えば、absoluteの起点は何も指定しなければページ全体になります。
特定の要素を起点にしたい場合、absoluteを指定する要素の親要素にrelativeをつけることで、親要素を起点に配置することができるようになります。

しっかりと今自分が何を指定して、何をしようとしているのか、理解していることが重要です。

位置を指定する際マイナスの値を取れる

また質問として上がるのは、要素同士が重なっている場合、マイナスの値で位置を指定できるのかです。

これはrelativeでしっかり親要素を決めている場合、子要素はマイナスの値が指定可能です。
この場合、子要素は親要素を基準にはみ出した形で表示されます。

まとめ

いかがでしたか？

positionには様々な配置の方法があり、プログラミング初心者には少し複雑な部分だと思います。

ここでは、positonについてわかりやすく解説しました。
基本的なpositionの使い方を知っているだけでも、要素の配置が自由になり、様々な表現が可能になります。

HTMLやCSSを使っていくには、とても大切なタグなので基本を抑え、レイアウトの整った綺麗なサイトを作りましょう。

calc関数とは何？CSS初心者でも分かる使い方も解説！