ビジネスとIT活用に役立つブログBlog


positionプロパティを身に着けよう!基本的な知識と使い方を解説!(基礎編)

この記事をシェアする:
HTMLの要素は通常、記述しただけでは右もしくは下に配置されていきます。要素を自由に配置できるということはwebサイトのデザイン性の向上だけでなく、ユーザーの使いやすさにも大きく関わってきます。
今回はそんな要素の配置位置を指定するときに役に立つCSSの一つ、positionプロパティについて、詳しく解説していきます。

positionプロパティとは

positionプロパティとは、要素に対し基準位置からの配置位置を指定するときに用いられるプロパティです。
当ブログでもpositionを用いて位置を指定してる要素があります。

当ブログの例

赤枠で囲った箇所がpositionを使用している要素となります。
具体的にはウィンドウ上部に固定されるメニュー、ウィンドウ右下部に固定されるボタン、ウィンドウ右部に固定されるサイドメニューや、タイトルの装飾と、他のサイトでもよく見かけるものですね。

また、他にもこのように要素の上にアイコンを配置したり、

アイコン

スマホサイトにおいてはハンバーガーメニューの固定など、本当に様々な場面で活用されています。

ハンバーガーメニュー

positionの使い方

それではpositionの使い方を簡単に説明します。
まずpositionに入る値からみていきましょう。

static 通常の位置で配置される
relative 通常の位置を基準に相対位置を指定
absolute 親要素を基準に絶対位置を指定
fixed ウィンドウを基準に絶対位置を指定
sticky スクロールに応じて要素の絶対位置指定を適用

以上5つがpositionに入る値となります。
今回はこのうちのstatic、relative、absolute、fixedの4つについて解説していきます。
stickyに関しては少し複雑になるので次の機会に解説します。

表示位置を指定するプロパティ

positionを指定する際はあわせてtop、right、bottom、leftという位置を指定するプロパティを使用します。

positionの指定

4つ全てを指定する必要はなく、topとleft、bottomとright、topのみなど、必要なものだけを指定していきます。
位置はpxや%で指定することができ、指定しない場合はtop: 0;left: 0;が適用されます。 値をリセットする場合はautoを入力します。

positionで位置指定方法を選択して、上記の4つのプロパティで具体的な数字を指定していくのが基本的な流れとなります。

以上がpositionの基本的な情報となります。

positionに入る値

それではpositionに入る値を解説していきます。

1. position: static;

static

staticはpositionの初期値で、値を入力しなくても適用されます。
topやleftを入力しても位置を変更することは出来ず、またz-indexも適用されません。

普段入力する機会のない値ですが、例えばパソコンではposition: absolute;だった要素をスマートフォンでは通常位置に配置したいなど、要素に指定したposition設定を上書きで打ち消して通常の配置位置に戻したい場合には入力することがあります。

2. position: relative;

relative

relativeは相対位置の指定となります。
通常配置される位置を基準として、移動位置を指定することができます。
例えば、図のように指定した場合、通常配置位置の上から50px、左から50px移動したところに配置されます。

この時、relativeを指定した要素は通常配置の高さを残したまま移動するので、下にある通常配置の要素が上に詰まることはありません。 また、staticとは違いz-indexの指定も可能なので、重なり順を変更することも可能です。z-indexを指定しない場合は、通常配置の要素の上に重なるように配置されます。

3. position: absolute;

absolute

absoluteは親要素にposition: static;以外を指定した場合、その親要素を基準に絶対位置を指定します。
例えば、図のように指定した場合、positionにrelative、absolute、fixed、stickyのいずれかが指定してある一番近い親要素を基準として、上から50px、左から50pxの位置に配置されます。
ここでは分かりやすいように、基準となる親要素を「基準要素」と呼ぶこととします。

absolute2

この時、absoluteを指定した要素の高さはなくなりますので、下にある通常配置の要素が上に詰まって配置されます。
配置場所によっては通常配置の要素と重なってしまうので、基準要素にpaddingを指定するなどの処理が必要になってきます。

前述したアイコンなどはこのabsoluteを使って表現できます。
通常はabsolute要素の直前にある親要素にrelativeを指定して基準要素とすることが多いですが、基準要素が一つもない(親要素が全てstatic)の場合はbodyが基準となります。

4. position: fixed;

fixed

fixedはウィンドウ全体を基準に絶対位置を指定します。
例えば先、図のように指定した場合、ブラウザのウィンドウを基準にして、上から50px、左から50pxの位置に配置されます。

fixed2

スクロールしても変わらずそこに配置されます。またabsoluteと同じく高さがなくなります。

当ブログの、ウィンドウ上部に固定されるメニューやウィンドウ右下部に固定されているボタンはfixedが使われています。
ウィンドウを基準にして配置しているのでスクロールしてもそこに固定され続けるのがfixedの特徴です。

さいごに

今回はpositionの基本的な知識と使い方をまとめました。

absoluteやfixedで高さがなくなるといった注意点はありますが、現在多くのサイトで使われているposition。
身につけておいて損はないと思いますので、この機会に習得しサイト作りに活かしていただけると幸いです。


この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!