本記事では、「CSS」のpositionについて解説します。具体的に解説する事項は、以下の通りです。
- 「CSS」のpositionの概要
- 「CSS」のpositionを使ってできること
- 「CSS」のpositionのプロパティ
- 「CSS」のpositionを使う際の注意点
- 「CSS」のpositionを使った上級テクニック
「CSS」のpositionとは、要素の位置を決めるために使用されるプロパティです。positionは、Webデザインや「HTML」「CSS」コーディングのときによく使われます。
「CSS」を勉強中の方やWebデザイナーを目指している方は、ぜひ参考にしてください。
目次
CSSのpositionとは？
「CSS」のpositionプロパティは、Webページ上の要素配置を制御するためのプロパティです。positionプロパティには、特定の動作や位置関係を設定できる値が存在します。
Webデザインをするとき、「CSS」のpositionプロパティがよく使われます。そのため、WebデザイナーやWebサイト制作者として仕事をしたい方は、positionプロパティの使い方や特徴をしっかりと理解しておきましょう。
とくに要素の重なりや配置に関する細かい調整をおこなう際には、プロパティの知識が必要です。
positionの基本的な書き方
「CSS」positionプロパティの基本的な書き方は「◯◯ {position: 値}」という形式で、要素の位置や動きを定義できます。
デフォルトの値は「static」で、特定の位置指定をおこなわないものです。しかし他の値を使用することで、要素の位置を細かく制御できます。たとえば「relative」を使用すると、topやleftといったプロパティを組み合わせて、要素を特定の位置に配置できます。
.element {
position: relative;
top: 10px;
left: 20px;
}
さらに、positionプロパティを効果的に使用するためには、top・bottom・right・leftの4つのプロパティと組み合わせることで、要素をページ上の好きな位置に正確に配置することが可能です。
また複数の要素を重ねる際には、z-indexプロパティを使用してどの要素を前面に表示するかを制御できます。
CSSのpositionはどのようなことができる？
「CSS」のpositionプロパティは、Webページ上の要素配置を制御するためのプロパティとして利用されています。このプロパティにはいくつか主要な値があり、それぞれ異なる配置の動作をします。主要な値は、`static` `relative` `absolute` `fixed` `sticky`です。
また、positionの値を最大限活用するために、top・bottom・right・leftといったプロパティを組み合わせて使用することが一般的です。さらに要素の重ね順を制御するためのz-indexプロパティも、positionとともに頻繁に使用されます。
CSSのpositionで位置を指定するプロパティ3つ
ここでは「CSS」のpositionで位置を指定する3つのプロパティを紹介します。
- 要素を好きな位置に動かす
- 要素に別の要素を重ねる
- position: fixedを使用して親要素を基準に固定する
positionで位置を指定する方法は、positionにおいて最も基本的な操作です。
要素を好きな位置に動かす
「CSS」のpositionで位置を指定するプロパティの1つ目は、Webページ上の要素配置を制御するためのプロパティです。具体的には、position: relative;を使用することで、要素を元の位置から相対的に移動できます。このとき、`top`や`left`などのプロパティを使って要素の位置を調整します。
.element {
position: relative;
top: 20px;
left: 30px;
}
上記のコードでは、要素を上から20px、左から30pxの位置に移動させています。
要素に別の要素を重ねる
「CSS」のpositionで位置を指定するプロパティの2つ目は、要素に別の要素を重ねるプロパティです。具体的には、position: absolute;やposition: relative;を指定した要素に対して、z-indexを使用することで要素の重なり順を制御できます。また、z-indexの数値が大きい要素ほど上に表示されます。
以下のコードは、要素Aを要素Bの上に表示させる例です。
.elementA {
position: absolute;
z-index: 2;
}
.elementB {
position: absolute;
z-index: 1;
}
position: fixedを使用して親要素を基準に固定する
「CSS」のpositionで位置を指定するプロパティの3つ目は、親要素を基準に固定するposition: fixedです。このプロパティを使用すると、要素はブラウザのビューポート（表示領域）に対して固定され、スクロールしてもその位置が変わりません。
メニューバーやコンタクトフォームなど、常に画面上に表示させたい場合によく使用されます。
.element {
position: fixed;
bottom: 0;
right: 0;
}
上記のコードは、要素を画面の右下に固定しています。
CSSのpositionで基準位置からの要素の距離を指定するプロパティ
「CSS」のpositionプロパティと組み合わせて使用されるtop・bottom・left・rightプロパティは、要素を基準となる表示位置から動かす距離を指定するためのものです。
positionプロパティには、static・relative＿absolute・fixed・stickyなどの値が存在し、それぞれの値に応じて基準となる位置が変わります。
たとえば、topプロパティは要素の上辺を基準位置から、どれだけ離すかを指定できます。具体的には、top: 20px;と指定すると、要素の上辺は基準位置から20ピクセル下に移動させることが可能です。
同様に、bottom・left・rightもそれぞれ要素の下辺・左辺・右辺を基準位置から指定した距離だけ動かせます。
例として、親要素に対して子要素を、絶対位置で配置する場合のコードを考えてみましょう。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50px;
left: 100px;
}
上記の例では、親要素にposition: relative;を設定し、子要素にはposition: absolute;とtop: 50px;、left: 100px;を設定することで、子要素は親要素の上から50px、左から100pxの位置に配置されます。
CSSのpositionで基準位置に関係するプロパティ
ここでは「CSS」のpositionで基準位置に関係する3つのプロパティについて解説します。
- Position: relative
- Position: absolute
- Position: sticky
ここで紹介するプロパティでは、絶対位置や相対位置など、どのような基準位置で配置を決めるのかを指定できます。またその際に、z-indexや先ほどのtopなどの複数のプロパティとセットで使用されます。
Position: relative
「CSS」のpositionで基準位置に関係するプロパティの1つ目は、Position: relativeです。このプロパティでは、要素を通常の位置から相対的に移動できます。たとえば、top: 10px;やleft: 20px;と指定した場合、要素は通常の位置からそれぞれの値だけ移動できます。
しかしこの移動は視覚的なものであり、元の位置を占有したままになるため、他の要素に影響を与えずに特定の要素だけを微調整したい場合に便利です。relativeを使用したコードの例は、以下の通りです。
div {
position: relative;
top: 10px;
left: 20px;
}
Position: absolute
「CSS」のpositionで基準位置に関係するプロパティの2つ目は、Position: absoluteです。Position:absoluteプロパティを使用すると、static以外の要素を基準に絶対位置によって配置が決定します。
たとえば親要素にposition: relative;が指定されている場合、子要素にposition: absolute; top: 0; right: 0;と指定すると、画面右上の角に配置されます。また、要素を特定の位置に固定したい場合や、重ね合わせたい場合にも使用可能です。absoluteを使用したコードの例は、以下の通りです。
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
}
Position: sticky
「CSS」のpositionで基準位置に関係するプロパティの3つ目は、Position: stickyです。このプロパティは、スクロールに応じて要素の位置を固定できます。また、通常のフロー内で要素が表示される位置から、指定した位置（例：top: 0;）に到達したときに、その位置に固定されます。ただし、この固定は親要素の範囲内でのみ動作します。
stickyはヘッダーやナビゲーションメニューを、上部に固定する際などに便利です。stickyを使用したコードの例は、以下の通りです。
header {
position: sticky;
top: 0;
}
CSSのpositionで要素をブラウザ上に固定するプロパティ
position: fixed;は、ブラウザ画面を基準位置にして、要素を固定する際に使用される「CSS」のプロパティです。このプロパティを使用すると、要素はスクロールしても常に同じ位置に表示されます。たとえば、ナビゲーションバーを画面の上部に常に表示させたい場合などに便利です。
また、top・right・bottom・leftのプロパティを組み合わせて使用することで、要素の表示位置を細かく指定が可能です。たとえば、「top: 10px; left: 20px;」と指定すると、要素はブラウザ画面の上から10px、左から20pxの位置に固定されます。
さらに、z-indexプロパティを使用することで、要素の重ね順を指定することができz-indexの値が大きい要素ほど、前面に表示されます。
また、position: fixed;とposition: absolute;は、どちらも要素を絶対配置するプロパティですが、基準位置が異なります。fixedはブラウザ画面を基準とし、absoluteは最も近くの親要素（positionがstatic以外）を基準とします。
以下は、position: fixed;を使用したサンプルコードです。
.fixed-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 10px;
z-index: 100;
}
上記のコードは、ナビゲーションバーを画面の上部に固定するためのものです。z-indexを100に設定することで、他の要素よりも前面に表示させています。
CSSのpositionを使う際の3つの注意点
ここでは「CSS」のpositionを使う際の注意点を3つ解説します。
- 画面からはみ出る場合がある
- positionを多用しないようにする
- 使いどころを見極める
「CSS」のpositionをマスターするには、注意点もしっかりと押さえておく必要があります。
画面からはみ出る場合がある
「CSS」のpositionを使う際の注意点の1つ目は、特にposition: absolute;やposition: fixed;を使用すると、要素が親要素やビューポートからはみ出る可能性があることです。
positionプロパティは、要素の配置を非常に柔軟におこなえます。しかしこの柔軟性が原因で意図しない位置に要素が配置され、親要素やビューポート（画面）からはみ出してしまうことがあります。
.box {
position: absolute;
top: 100%;
left: 100%;
}
上記コードの場合、.box要素は画面の右下隅からはみ出してしまいます。このような場合、画面下に横スクロールが発生してしまい、UX（ユーザーエクスペリエンス・ユーザー体験）が悪くなるでしょう。
この問題を解決するためには、親要素にoverflow: hidden;を設定することで、はみ出した部分を非表示にすることができます。
positionを多用しないようにする
「CSS」のpositionを使う際の注意点の2つ目は、状況に応じて適切に使用することです。
positionは便利なプロパティであり、とくに初心者の方は多用しがちです。しかしpositionを過度に使用すると、「CSS」の拡張性や保守性が損なわれる可能性があります。
.container {
position: relative;
}
.item1 {
position: absolute;
top: 0;
left: 0;
}
.item2 {
position: absolute;
top: 50px;
left: 50px;
}
上記サンプルコードのように、多数の要素にpositionを設定すると、後からの修正や追加が難しくなります。要素と要素を縦や横に並べるデザインをする際は、display: flex;やdisplay: grid;を使用するなど、適切なプロパティを選択しましょう。
使いどころを見極める
「CSS」のpositionを使う際の注意点の3つ目は、使いどころを見極めることです。
position: absolute;は、要素を自由に配置できる便利なプロパティです。しかし適切に使用しないと、レイアウトの崩れや予期しない動作が発生する可能性があります。
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
}
この場合、.child要素は.parent要素の右上隅に配置されます。ただしこの配置は、.child要素のサイズや他のスタイリング・他の要素の配置に依存するため、画面サイズが変わると他の要素と重なる可能性があるでしょう。
とくにレスポンシブデザインを考慮する場合、position: absolute;の使用は慎重におこなう必要があります。適切な使いどころを見極め、必要な場面のみ使用しましょう。
CSSのpositionを使った上級テクニック
ここでは「CSS」のpositionを使った2つの上級テクニックについて解説します。
- ヘッダーの固定でレイアウト崩れを起こさない方法
- 要素にラベルを貼り付ける
ここで紹介するテクニックは上級者向けですが、基本を押さえておけばいずれ習得が可能です。positionプロパティの扱いに慣れてきたら、頻繁にデザインに取り入れてみてください。
ヘッダーの固定でレイアウト崩れを起こさない方法
「CSS」のpositionを使った上級テクニックの1つ目は、ヘッダーの固定でレイアウト崩れを起こさない方法です。とくに、position: fixed;を使用してヘッダーを固定すると、ヘッダーの高さ分だけページ全体のレイアウトが上にズレることがあります。
ズレを解消するには、bodyやそれ以降の要素にmargin-topを指定して、ヘッダーの高さ分だけスペースを確保してください。具体的には、ヘッダーの高さが50pxの場合、bodyにmargin-top: 50px;と指定する方法です。ただし、この方法は他のCSSフレームワークとの互換性や特定のレイアウト要件に対応できない場合があるため注意しましょう。
また、position: fixed;を指定した要素が横いっぱいに広がらない場合、width: 100%;を指定して、要素が画面全体の幅を取るようにしてください。
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
}
body {
margin-top: 50px;
}
要素にラベルを貼り付ける
「CSS」のpositionを使った上級テクニックの2つ目は、要素にラベルを貼り付けることです。このテクニックは、特定の要素に追加の情報や注釈を提供する際に非常に役立ちます。
具体的には、疑似要素::beforeや::afterを使用して、要素にラベルを追加します。そして、contentプロパティを使用し、ラベルに表示するテキストや記号を指定してください。
ラベルの位置を調整するために、top・right・bottom・leftのプロパティを使用しましょう。ラベルが他の要素と重なる可能性がある場合は、z-indexプロパティを適切に設定してください。
以下は、要素に上部にラベルを追加する例です。
.element {
position: relative;
}
.element::before {
content: "ラベル";
position: absolute;
top: -20px;
left: 0;
}
CSSのpositionの使い方をマスターし、Webサイト制作を進めよう
「CSS」のpositionについて解説しました。本記事を確認することで、「CSS」を使ったWebサイト制作において、要素の位置を指定する方法を理解する助けになるでしょう。
またpositionは「CSS」のコーディングでもよく使われるプロパティなので、必ず押さえておく必要があります。Webサイト制作の仕事をしたい方は、ぜひ「CSS」のpositionを使ったコードを書いてみてください。
