CSSのPosition Absolute使い方完全ガイド

Webデザインで要素を好きな場所に配置したいと思ったときに活躍するのが、Position: Absolute;です。HTMLの要素を自由に動かせる強力なCSSプロパティですが、基準点・起点の理解がないとレイアウトが崩れる原因にもなります。この記事では、Position Absoluteの基本概念と使い方を中心に、Relativeとの違い、中央配置のテクニックまでを初心者向けにわかりやすく解説します。

Table of contents

position:absoluteとは？｜要素を自由に配置できるCSSプロパティ
absoluteで使う位置指定プロパティを理解しよう
1. z-indexで重なり順を制御する
position:absoluteの基準点・起点を正しく設定する
1. relativeを親要素に指定する理由
2. relativeとabsoluteの違い
position:absoluteを使った実践レイアウト例
absoluteを使う際の注意点と落とし穴
position:absoluteを使いこなす応用テクニック
まとめ｜absoluteの基礎を押さえて思い通りのレイアウトを作ろう

position:absoluteとは？｜要素を自由に配置できるCSSプロパティ

position: absolute;は、要素を通常の文書の流れ（static）から外し、自由な位置に配置できるプロパティです。

.box {
position: absolute;
top: 50px;
left: 100px;
}

この場合、要素は左から100px、上から50pxの位置に表示されます。

absolute指定をすると、要素はページ全体または親要素を基準に座標で配置されます。他の要素に影響されずに位置を決められるため、画像の上に文字を重ねる、バナーを固定位置に置くなどが可能です。

absoluteで使う位置指定プロパティを理解しよう

top・right・bottom・leftを組み合わせて位置を調整します。

プロパティ	意味
top	上端からの距離
bottom	下端からの距離
left	左端からの距離
right	右端からの距離

.box {
position: absolute;
top: 10px;
right: 20px;
}

→ 親要素の右上から10px下、20px左の位置に配置されます。

px指定は固定的で正確、%指定は親要素に対して相対的に配置されるため、レスポンシブ対応に便利です。

z-indexで重なり順を制御する

.text {
position: absolute;
z-index: 2;
}
.image {
position: absolute;
z-index: 1;
}

数値が大きいほど前面に表示されます。positionの種類（absolute・relative・fixed）の違いを理解しておくと、z-indexの使い方もより明確になります。

position:absoluteの基準点・起点を正しく設定する

absoluteの位置指定は、最も近い「position指定を持つ親要素」を基準に計算されます。もし親要素にpositionが設定されていない場合、bodyが基準になります。

relativeを親要素に指定する理由

.parent {
position: relative;
}
.child {
position: absolute;
top: 10px;
left: 20px;
}

この場合、.childは.parentを基準に配置されます。relativeを親に設定し、absoluteを子に設定するのが基本構造です。

relativeとabsoluteの違い

特徴	relative	absolute
配置基準	自分自身	親要素 or body
レイアウト影響	スペースを保持	流れから外れる
主な用途	微調整	自由配置・重ね表示

position:absoluteを使った実践レイアウト例

1. 画像の上に文字を重ねるキャプションデザイン

<div class="image-box">
<img src="photo.jpg" alt="sample">
<p class="caption">美しい景色</p>
</div>
.image-box {
position: relative;
}
.caption {
position: absolute;
bottom: 10px;
left: 15px;
color: white;
background: rgba(0,0,0,0.5);
padding: 5px 10px;
}

relativeな親に対してabsoluteで文字を重ねる典型例です。

2. 要素を画面中央に配置する方法

.center-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

top・leftを50%にし、transformで補正することで、画面のど真ん中に配置できます。

3. 擬似要素::beforeを使った枠線デザイン

.button {
position: relative;
display: inline-block;
padding: 10px 20px;
background: #3498db;
color: #fff;
}
.button::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border: 2px solid #3498db;
}

擬似要素をabsoluteで配置することで、親要素の外側に装飾を追加できます。詳しくは初心者向けのabsolute活用ガイドでも実例付きで説明されています。