CSSのpositionプロパティ完全ガイド！5つの値で要素の配置をマスターしよう

CSSのpositionプロパティは、HTMLページ上の要素の位置を制御するための重要なプロパティです。top、right、left、bottomプロパティと組み合わせることで、ボックスの端を基準に要素を思い通りの位置に配置できます。positionプロパティには「static（静的）」「fixed（固定）」「relative（相対）」「sticky（粘着）」「absolute（絶対）」の5つの値が用意されています。

Webデザインにおいて、仕様どおりに要素を適切な位置へ配置することは、見やすく使いやすいサイトを作るうえで欠かせない要素です。その実現を支えているのが、まさにCSSのpositionプロパティです。このプロパティには5つの値があり、それぞれを使い分けることで、Webページ上の要素の配置方法を細かく定義できます。

本記事では、具体的なコード例を交えながら、positionプロパティを使ってWebページ上に要素を配置する方法を詳しく解説します。読み終える頃には、positionプロパティを自在に使いこなせるようになっているはずです。

CSS Positionとは

positionプロパティを使用すると、Webページ上の要素の位置を定義できます。構文は以下のとおりです。

position: positionType;

positionプロパティが役立つ場面は数多くあります。たとえば、ページ下部に固定表示されるナビゲーションバーをデザインしたい場合などに便利です。

要素の位置を設定するために使用できる値は、次の5つです。

static（静的）
fixed（固定）
relative（相対）
sticky（粘着）
absolute（絶対）

これらの値のいずれかを指定することで、要素の配置方法を決められます。さらに、top、bottom、left、rightプロパティを併用すると、ページ上での要素の位置をより詳細に指定できます。それぞれの動作については、後ほどコード例とともに確認していきましょう。

CSS Positionの5つの値

ここからは、positionプロパティに指定できる各値の使い方を、実際のコード例をもとに順番に見ていきます。

Static（静的配置）

HTML要素は、デフォルトでは静的（static）に配置されます。つまり、top、bottom、left、rightプロパティの影響を受けません。コードで特別な指定がない限り、ブラウザは自動的に要素を静的な位置で描画します。

たとえば、テキストを含むボックスをデザインしているとしましょう。デフォルトの位置でボックスの中身を配置したい場合は、次のようなコードを使用します。

<html>

<div class="outer">
	<p>これは配置されたボックスです。</p>
</div>

<style>

.outer {
	position: static;
	border: 2px solid lightblue;
}

CSSのpositionプロパティ完全ガイド！5つの値で要素の配置をマスターしよう 上記コードエディタのボタンをクリックすると、HTML/CSSコードの出力結果を確認できます。

この例では、ページ上に静的に配置されたボックスを作成しました。つまり、ボックスは特定の方法で位置指定されておらず、その位置はブラウザのデフォルト設定に基づいています。ボックスには幅2pxの水色の実線ボーダーを設定しており、これによってボックスが視覚的にわかりやすくなっています。

Fixed（固定配置）

fixedの値は、要素をWebページ上の特定の場所に固定します。

fixedを使用した要素は、常に同じ場所にとどまり続けます。ユーザーがページを下にスクロールしても、要素は固定されたままです。これは、要素が通常のページフローから切り離されるためです。fixedで要素を配置する場合は、top、right、bottom、leftプロパティを必ず併用する必要があります。

ここでは、ボックスを作成し、それをWebページの右下隅に固定してみましょう。次のコードで実現できます。

<html>

<p>これはWebページのコンテンツです。</p>
<div class="outer">
	<p>これは配置されたボックスです。</p>
</div>

<style>

.outer {
	width: 200px;
	border: 2px solid lightblue;
	position: fixed;
	bottom: 0;
	right: 0;
}

この例では、fixedの値を使って、ページ上の特定の位置に固定されたボックスを作成しました。bottom: 0とright: 0というプロパティにより、ボックスはページの右下隅に配置されます。

また、ボックスの幅を200pxに指定し、幅2pxの水色の実線ボーダーを設定しています。これらのスタイルによって、ボックスがひと目でわかるようになっています。

上の画像のとおり、ボックスはページの右下隅に配置されています。ユーザーが下にスクロールしても、ボックスは画面上の同じ位置を保ち続けます。つまり、スクロールしても、ユーザーの画面右下には常にボックスが表示され続けるのです。

Relative（相対配置）

relativeの値は、要素をそのデフォルトの位置を基準として配置します。

relativeは、top、bottom、left、rightプロパティと組み合わせて使用します。これら4つのプロパティは、要素がデフォルトの位置からどれだけオフセットされるかを指定します。なお、相対配置されたボックスが元々占めていたスペースは、他の要素によって埋められることはありません。

たとえば、要素を左側から50pxオフセットした位置に配置したい場合は、leftプロパティに値を指定します。そのようなボックスを作成するコードは以下のとおりです。

<html>

<p>これはWebページのコンテンツです。</p>
<div class="outer">
	<p>これは配置されたボックスです。</p>
</div>

<style>

.outer {
position: relative;
left: 50px;
	border: 2px solid lightblue;
}

この例では、相対配置されたボックスを定義しました。leftプロパティを使って、ボックスを左方向に50pxオフセットしています。ご覧のとおり、ページの先頭とボックスの始まりの間には50pxの余白が生まれています。これはposition: relativeとleft: 50pxというプロパティによって実現しています。

ボックスの左側にできたスペースは、他の要素によって埋められることはありません。

Sticky（粘着配置）

stickyの値は、訪問者がしきい値を超えるまでは要素を相対的に配置し、超えた時点で要素を固定位置にします。

stickyは、relativeとfixedを組み合わせたような性質を持っています。sticky要素が読み込まれた時点では相対的に配置され、ユーザーがページ上の一定の位置を過ぎてスクロールすると、要素は固定位置に留まり続けます。

sticky配置は、ドキュメントの流れを維持したい場合に便利です。要素を特定の位置に貼り付けておけば、訪問者がその要素を見失うことがなくなります。

stickyは特に、ユーザーがページを下にスクロールしても画面上部に張り付くナビゲーションバーによく使われています。

ここでは、ページの上部に現れるボックスを作成してみましょう。このボックスは、いくつかのテキストの後に表示され、ユーザーが画像までスクロールすると画面上部に固定されるようにします。次のコードで実現できます。

<html>

<p>Lorem ipsum dolor sit amet, … </p>
<div>
	<p class="inner">これは配置されたボックスです。</p>
</div>
<p>Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Tortor at auctor urna nunc id. … </p>

<style>

.inner {
	position: sticky;
	top: 0;
	border: 2px solid lightblue;
}

この画像では、ボックスが最初の段落テキストの後に表示されていることがわかります。これは、ユーザーがまだスクロールしておらず、ボックスの位置に達していないためです。ユーザーがボックスを過ぎてスクロールすると、次のように変化します。

CSSのpositionプロパティ完全ガイド！5つの値で要素の配置をマスターしよう

ページの上部にはLorem ipsum …という標準テキストの段落があります。その下に、これは配置されたボックスですというテキストを含むボックスを固定配置しました。さらに、ユーザーが宣言した配置ボックスまで下にスクロールすると、ボックスは画面の上部に張り付きます。ユーザーがスクロールを続けても、ボックスは画面の上部に留まり続けます。

そして、ユーザーがボックスより上の位置まで戻ってスクロールしたときのみ、ボックスは2つの段落の間にある元の位置へ戻ります。

Absolute（絶対配置）

absoluteの値は、すでに位置指定されている別の要素を基準として、要素を配置します。

絶対配置された要素は、たとえば段落テキストを含むボックス内のテキストである場合があります。このボックス自体は、relativeまたはfixedの位置を持っていることがあります。

ここでは、別のボックスの左下隅に表示したいボックスをデザインしてみましょう。次のコードでこれらのボックスを作成できます。

<html>

<div class="outer">
	<p>これは外側のボックスです。</p>
	<p class="inner">これは配置されたボックスです。</p>
</div>

<style>

.outer {
	position: relative;
	border: 2px solid lightblue;
	width: 300px;
	height: 300px;
}

.inner {
	position: absolute;
	left: 0;
	bottom: 0;
	border: 2px solid pink;
}

HTMLファイルでは、2つのボックスを定義しています。1つ目のボックスは<div>タグで宣言し、クラスouterを割り当てています。これにより、このボックスにはouterクラスに関連付けられたCSSスタイルが適用されます。2つ目のボックスは<p>タグで宣言し、クラスinnerを割り当てています。

CSSファイルでは、外側のボックスについて以下を指定しています。

Webページ上の他の要素を基準とした相対配置であること
幅2pxの水色の実線ボーダーを持つこと
幅300px × 高さ300pxのサイズであること

また、内側のボックスについては以下を指定しています。

絶対配置であること
外側のボックスの左下に配置されること（left: 0、bottom: 0を使用）
幅2pxのピンク色の実線ボーダーを持つこと

この例では、ピンク色のボックス（inner）をouterボックスの左下に配置しました。もし代わりにfixedキーワードを使用していた場合は、ピンク色のボックスはWebページ自体の下部に配置されていたでしょう。

まとめ

CSSのpositionプロパティは、Webページ上の要素の位置を定義します。top、right、bottom、leftプロパティと組み合わせれば、要素をページ上の任意の場所に配置できます。これで、あなたもpositionプロパティを使いこなして、プロのようにCSSで要素を配置できるようになったはずです。ぜひ実際のプロジェクトで試してみてください。

ブートストラップフレームワークを使用したテーブルの作成

CSS @keyframes（キーフレーム）の使い方を徹底解説！アニメーション作成の基本と実例

CSSの要素タイプセレクターとは？基本構文と実例をわかりやすく解説
CSSの要素タイプセレクターは、指定した種類の要素をすべて一括で選択するためのセレクターです。たとえば「li」と指定すれば、ページ内のすべてのリスト項目に同じスタイルが適用されます。HTML文書全体に共通のデザインを設定したい場合に非常に便利な、CSSの基本的なセレクターです。構文要素タイプセレクターの書き方は以下のとおりです。セレクター名として要素名をそのまま記述します。 element { /*declarations*/ } サンプルコード1：リストとdiv要素への適用例次の例では、li 要素と div 要素に対してそれぞれスタイルを指定しています。 &l
CSSのpositionプロパティ徹底解説！static・relative・absolute・fixedの使い分け
CSSのpositionプロパティとは CSSのpositionプロパティは、要素の配置方法（ポジショニング）を指定するために使用されます。このプロパティを使いこなすことで、通常の文書フローに従った配置はもちろん、要素を好きな位置に重ねて表示することも可能になります。 positionプロパティに指定できる主な値は以下の4つです。 static（静的配置）デフォルト値です。要素は通常の文書フローの一部として、直前の要素に続いて配置され、後続の要素も通常どおり流れます。topやleftなどのオフセット指定は無効になる点に注意しましょう。 relative（相対配置）要素は通常の文書フロー内に