23.
要素の位置指定
position
positionとは
positionプロパティは、要素の位置を指定するために使用されます。
ファイル構成
basic/
└── basic.html
position.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position</title>
<link rel="stylesheet" href="css/position.css">
</head>
<body>
<nav class="absolute-menu">
Menu
</nav>
<div class="static-position">Static Position</div>
<div class="relative-position">
Relative Position
</div>
<div class="relative-parent">
Parent
<div class="absolute-position">
Absolute Position
</div>
</div>
</body>
</html>
static (デフォルト値)
static はHTMLの要素を通常に配置します。positionを指定しない場合、staticがデフォルトで適用されます。
top, right, bottom, left, z-indexプロパティは無視されます。
<div style="position: static;">Static Position</div>
relative (相対位置)
relative は要素を通常フローで配置後、その位置を top, right, bottom, left を基準に調整します。
親要素に対しては位置を維持しますが、見た目上の位置はずらされます。
<div style="position: relative; top: 10px; left: 20px;">
Relative Position
</div>
absolute (絶対位置)
absoluteは要素をフローから完全に外し、親要素（relative, absolute, fixed基準）から絶対座標で位置指定します。
親要素が通常配置（static）の場合、ビュー全体（HTML）の基準に絶対１で配置します。
<div style="position: relative;">
Parent
<div style="position: absolute; top: 0; left: 0;">
Absolute Position
</div>
</div>
- fixed (固定位置) 説明: 要素を文書のフローから外し、ブラウザのビューポートを基準に配置します。 特徴: スクロールしても位置が変わらない。 常に画面上に固定表示。 使用例: html コードをコピーする
Fixed Position
5. sticky (スティッキー位置)
説明: 要素を通常のフローに従って配置した後、特定のスクロール位置に達するとその位置に固定されます。
特徴:
top, right, bottom, left の値を使用して固定位置を指定。
固定の基準はスクロール領域（親要素）に依存。
使用例:
html
コードをコピーする
Sticky Position
position の比較表
position レイアウトに影響 基準点 スクロールで動く 主な用途
static あり 通常の文書フロー 動く デフォルト配置
relative あり 通常の位置からの相対位置 動く 相対的な微調整
absolute なし 最も近い relative または absolute 親 動かない 要素を文書フローから外す
fixed なし ビューポート 動かない 固定ヘッダーや通知
sticky あり スクロール領域内で固定位置 条件付きで動く セクションヘッダー
よくある質問
1. absolute と relative の違いは？
relative: 通常の位置を基準にずらす。文書のレイアウトに影響を与える。
absolute: 通常の位置を無視し、指定された親要素を基準に配置。
2. sticky が動かない原因は？
親要素にスクロール可能な領域（overflow: auto または scroll）がないと機能しません。
スムーススクロール
html {
scroll-behavior: smooth;
scroll-padding-top: 100px;
}