CSSのpositionプロパティを覚えよう！使い方や注意点もご紹介

WEBデザインやコーディングを覚えたての頃、このpositionプロパティを使って苦戦した方は多いのではないでしょうか。

positionプロパティは使えるととても便利なのですが、使用する上では注意が必要なプロパティでもあります。

今回はこのpositionプロパティの基本的な使い方から注意点までご紹介していたいと思います！

positionプロパティの値の種類

positionプロパティには、以下のようにいくつかの値があります。

realative	相対的位置として要素を配置します。 配置された要素を起点にします。
absolute	絶対位置として要素を配置します。 親要素にrelativeがあれば、そこを起点に配置されますが、 無い場合はブラウザのモニターを基準として配置されます。
fixed	absoluteと同じく絶対位置として要素を配置します。 動作はabsoluteと似ているのですが、配置された 位置に固定された状態になります。
static	relativeと同じような動作で、positionプロパティの初期値は この値になります。
sticky	スクロールする事によって配置位置が変化します。

positionプロパティの位置を決める「top」「bottom」「left」「right」プロパティと合わせて使います

positionプロパティでは、配置された位置を起点に、「top」「bottom」「left」「right」というプロパティを使って、配置する位置を調整する事も可能です。

敢えて、コンテンツからはみ出したようなデザインを作る時にはこうしたプロパティと組み合わせて使う事が多いですね。

positionプロパティを使った要素の配置例

では実際にpositionプロパティを使ったサイトをご紹介したいと思います。

UTグループ株式会社

URL：https://www.ut-g.co.jp/

こちらのサイトではヘッダーにposition:fixed;でヘッダーを固定していますので、スクロールしてコンテンツをみていってもヘッダーが固定されていますので、常にグローバルナビが表示されています。

REALGATE

URL：https://realgate.jp/

こちらのサイトでは、メインビジュアル画像の上にはみ出て配置されたキャッチコピーをposition:absolute;で配置しています。

こうした敢えて崩したような配置のデザインは、近年よく見るデザインですね。

ちなみに、こうした配置はposition:relative;でも実現が可能ですが、サイトのデザインや仕様によって使い分けると良いかもしれません。

Rriver

URL：https://parashuto.com/rriver/development/position-sticky

こちらのサイトではposition:sticky;について詳細な使い方や注意点を記載しています。

また、DEMOサイトにてposition:sticky;の動作が確認できます。

positionプロパティを使う時の注意点

positionプロパティ、特にabsoluteやfixedでは使用する際に注意しておきたい事があります。

それは先述した通り、absoluteとfixedの値は、親要素にposition:relative;を指定していないと、配置位置がブラウザのモニターを起点にしてしまいますので、注意が必要です。

使用する多くのケースでは、親要素にrelativeを指定して使うようにすると良いかもしれません。

まとめ

CSSのpositionプロパティについて使い方や注意点もご紹介してきましたが、いかがだったでしょうか？

positionプロパティは最初は扱いにくいプロパティですが、使い慣れると奇抜なデザインにも対応できたりと、コーディングで表現できる幅も広がりますので、是非とも覚えておくと便利でしょう！