FlexboxやMarginを使えば、要素を綺麗に並べることはできます。
でも、こんなデザインを作ろうとして手が止まったことはありませんか？
- 「メイン画像の上に、キャッチコピーをドン！と重ねたい」
- 「スクロールしても、メニューバーがずっと上についてきてほしい」
- 「画像の右上に『NEW!』というアイコンを乗せたい」
これらに共通するのは「要素を重ねる」という動きです。
これを実現するのが、CSSの「position（ポジション）」プロパティです。
今回は、Webデザインの幅を一気に広げる「3つの配置ルール」をマスターしましょう！
1. 自由に配置する「Absolute（アブソリュート）」
positionの中で一番よく使うのがこれです。
position: absolute; を指定された要素は、「浮遊霊」のようになります。
他の要素の並び順（HTMLの順番）を無視して、指定した場所にフワッと浮いて配置されます。
.box {
position: absolute;
top: 10px; /* 上から10px */
right: 10px; /* 右から10px */
}こう書くと、その要素は「画面の右上の角」に配置されます。
【最重要】「親＝relative、子＝absolute」のルール
しかし、absolute には初心者が必ずハマる罠があります。
ただ absolute と書いただけだと、基準が「ブラウザの画面全体」になってしまい、意図しない場所に飛んでいってしまいます。
「この画像の右上に置きたい！」というように、基準を決めたい場合は、「親要素」に目印をつける必要があります。
鉄板の書き方セット
- 親要素（基準）：
position: relative; - 子要素（動かす物）：
position: absolute;
これをセットで覚えてください。「親がリラティブ、子がアブソリュート」です。
こうすることで、子要素は「親の箱の左上が原点（0,0）」になり、そこからの距離で配置できるようになります。
2. 画面に張り付く「Fixed（フィックスド）」
これは分かりやすいです。スクロールしても位置が変わらない「固定要素」を作ります。
追従するヘッダーや、画面右下の「トップへ戻るボタン」などで使います。
.header {
position: fixed; /* 画面に固定！ */
top: 0; /* 画面の一番上 */
width: 100%; /* 横幅いっぱいに */
z-index: 100; /* 他の要素より手前に表示（後述） */
}3. 重なり順序を決める「z-index（ゼットインデックス）」
positionを使って要素を重ねると、「文字が画像の下に隠れちゃった！」ということが起きます。
そんな時は z-index で重なりの優先順位を指定します。
数字が大きいほど「手前」に来ます。
z-index: 0;（初期値）z-index: 10;（少し手前）z-index: 9999;（めちゃくちゃ手前）
※注：z-index は position（static以外）が指定されている要素にしか効きません！
実践：画像の上に文字を重ねてみよう
では、おしゃれなWebサイトでよく見る「ヒーローヘッダー（トップ画像＋文字）」を作ってみましょう。
top: 50%; と left: 50%; に、transform という技を組み合わせて、「完全にど真ん中」に配置します。
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
/* 親要素（基準） */
.hero-container {
position: relative; /* ★ここが重要！子要素の基準点になる */
width: 100%;
height: 300px;
background-image: url('https://placehold.jp/800x300.png'); /* ダミー画像 */
background-size: cover;
}
/* 子要素（重ねる文字） */
.hero-text {
position: absolute; /* ★浮かせて自由に配置 */
/* 親の真ん中に寄せる魔法の記述 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 自身の大きさの半分だけ戻る */
color: white;
font-size: 24px;
font-weight: bold;
text-shadow: 1px 1px 5px rgba(0,0,0,0.5); /* 文字を見やすくする影 */
}
</style>
</head>
<body>
<div class="hero-container">
<p class="hero-text">Welcome to My Website</p>
</div>
<p>↑ 画像の上に文字が乗っていますか？</p>
</body>
</html>まとめ：使い分けのポイント
positionは強力ですが、使いすぎるとレイアウトが崩壊します。
基本はFlexboxで並べて、どうしても「重ねたい」「固定したい」時だけpositionを使いましょう。
- relative： 基準となる親につける。
- absolute： 自由に動かしたい子につける。
- fixed： 画面にずっと固定したい時につける。
これで「平面」だけでなく「奥行き」のあるWebサイトが作れるようになりました！