positionプロパティの正しい使用方法を図解で詳しく紹介！

CSSのpositionプロパティは要素の位置を移動できるということは知っていても、使いこなせていない人も多いのではないでしょうか。positionプロパティを理解すれば、Ｗebサイトを作る上で重要な要素の移動が簡単にできるようになります。positionプロパティの機能を正しく活用して、分かりやすいＷebサイト制作を目指しましょう。

今回は、positionプロパティの値の種類や特徴、それぞれの注意点などを紹介します。

positionプロパティの基本

positionプロパティとは？

positionプロパティは、要素の位置を決める方法を指定することができるプロパティです。relativeやabsolute、fixedなどの値から位置を動かす基準を選択して、要素の位置を変えたり、要素を他の要素の上に重ねたりすることができます。

動かす要素の位置は、top、right、bottom、leftプロパティで値を指定します。

top、right、bottom、left

positionプロパティで要素をどのくらいの位置に動かすのかを指定するために、positionプロパティとセットで使用されるのがtop、right、bottom、leftです。以下のように基準となる点からどれくらい移動するのかは、以下のように位置を指定します。

たとえば、上から100px、左から300px移動するには、以下のように記述します。

また、下から100px、右から200px移動するには、以下のように記述します。

positionの値の種類

それではここから、positionプロパティの値としてよく使われる3つの値の動き方を詳しく紹介していきます。

relative

relativeとは

relativeの役割は基本的に現在の位置を基準として、指定された数値の分要素を移動させる際に使用されます。

relativeの使用例

実際にrelativeはどのような動きをするのか、以下の図を例に説明します。黒い枠がウィンドウの幅として、box1とbox2をそれぞれ作りました。今回は簡略化するために、大きさや余白に関するCSSの記述は省いています。

上記のように、box2の現在の位置の端を基準として、上から100px、左から200px移動してbox1と重ねた場合、下の図のようになります。

このように、要素にrelativeをかけることで、要素の現在の位置を基準として移動させることができます。

absolute

absoluteとは

absoluteは、基本的にウィンドウを基準として指定された数値の分だけ移動するために使用されます。親要素にrelativeやfixedなどがかかっている場合は、親要素を基準としてabsoluteをかけた子要素を移動させることができます。

absoluteの使用例

実際にabsoluteはどのような動きをするのか、以下の図を例に説明します。

上記のようにbox2を、ウィンドウの端を起点として、上から100px、左から200px移動してbox1と重ねた場合、下の図のようになります。

このように、要素にabsoluteをかけると、ウィンドウを基準として移動します。

positionプロパティの値をrelativeにするか、absoluteにするかで要素の移動の起点が変わります。

fixed

fixed

fixedは、要素を指定の位置に固定させるために使用されます。基準はウィンドウ全体で、「top: 0px」と記述すると最上部に固定されます。

fixedの使用例

fixedを指定することで、ウィンドウ左端を基準とした上下左右に要素を移動し、固定させることができます。スクロールしても、fixedを指定した要素が消えることはなく、常に画面内の指定した位置に残り続けます。今回例として挙げるグローバルナビゲーションに使用するだけでなく、「トップへ戻る」ボタンの位置設定にも使用されます。

positionプロパティのfixedを指定している例を、WebMediaのトップページを使って説明します。

上の画像はWebMediaのトップページ画面です。ページトップには、案内リンクと呼ばれるグローバルナビゲーションが設置されています。このグローバルナビゲーション部分にも、fixedが指定されています。

このように、画面の下にスクロールしても、ページトップにはグローバルナビゲーションが残っています。

子要素にabsoluteを指定した際の動き方

ここまで、relative、absolute、fixedの基本的な動き方を説明してきました。しかし、このままだと起点が「ウィンドウ」か「現在の位置」しかないため、位置を決めるプロパティの値が大きくなってしまう可能性があり、コード的に言えば少し強引なコーディングになってしまいます。起点を移動させたい場所に近ければ近いほど、プロパティの値も小さくなり、分かりやすいコーディングになります。

そこで今回は移動させたい要素を、その親要素を起点として位置を移動させる方法をお伝えします。

方法を簡潔にまとめると、移動させたい要素にpositionのabsoluteを、起点にしたい親要素に対しpositionのrelative、absolute、fixedのいずれかをかけることで親要素を起点にした要素の移動が可能になります。

それでは、以下の図を例に紹介していきます。

ウィンドウが基準になる場合

移動させたい要素にpositionのabsoluteをかけ、親要素にはpositionプロパティを使用していない場合、移動させたい要素はウィンドウを基準として移動します。こちらは最初に出てきたabsoluteの基本的な動き方でしたね。

このように子要素を、上から100px、左から200px移動する場合、子要素の移動の基準となるのは、ウィンドウの左端です。親要素にはpositionプロパティが何もついていないので、子要素の移動の基準にはなりません。

親要素が基準になる場合

では、親要素にpositionプロパティのrelativeを指定してみましょう。そうするとpositionのabsoluteをかけた移動させたい要素は、relativeをかけた親要素を起点として、移動させることができます。

このように子要素を、親要素を起点として上から100px、左から200px移動させることができます。

親要素の中の特定の位置に子要素を重ねたいのに移動の基準がウィンドウの左端になってしまう、という経験をしたことのある方もいるのではないでしょうか。子要素にabsoluteを指定する際は、親要素にpositionプロパティが指定されているかどうかの確認を忘れないようにしてください。

まとめ

今回は、positionプロパティの値の種類や使用方法について紹介しました。positionプロパティを活用すれば、各要素を自由に重ねたり移動したりすることができます。ある画像の上に説明文を加える際などに活用してみてください。

しかし、floatやflexプロパティで指定できる部分はそれらを使用し、positionプロパティを多用しすぎないようにしましょう。それぞれにプロパティの長所と短所を理解し、場合に合わせて適切なプロパティが選べるようになれば、Ｗebサイトを制作する上で使える技術の幅が広がるでしょう。

WebMediaでは、今回紹介したpositionプロパティのほかにも、HTML・CSSの基本知識やWebサイトを作る上で欠かせない情報をお届けしています。ぜひ他の記事もご覧ください。

Web担当になったけれど自分の知識に自信がない、自社のWebページをもっと改善したい、けれども、うちにはそんな時間も人材もないというお悩みはございませんか？
WebMediaを運営するITRAではお客様に真摯に向かい、ご要望に沿ったWebサイト制作やリニューアルを行ってきました。お気軽にお問い合わせください。