問題
position: fixedで固定したナビゲーションバーがコンテンツを隠してしまいます。
HTML
<nav class="fixed-nav">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
<main class="main-content">
<h1>ページタイトル</h1>
<p>メインコンテンツがここに入ります。</p>
</main>CSS
.fixed-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 15px;
/* z-indexなし */
}
.main-content {
/* marginやpaddingなし */
background-color: #f9f9f9;
}
.main-content h1 {
margin-top: 0;
}🔧 実際に試してみよう（リアルタイム更新）
上部でHTMLまたはCSSタブを選択して編集すると、下部の結果エリアがリアルタイムで更新されます。
CSSの /* z-indexなし */ の部分に z-index: 100; を追加し、.main-content に padding-top: 60px; を追加してみましょう。
📺 ライブプレビュー
更新中
ヒント
クリックしてヒントを表示
position: fixedの要素は通常のドキュメントフローから除外されます。
そのため、他の要素は固定要素の存在を認識せず、その下に配置されてしまいます。
コンテンツ側に適切なスペースを確保する必要があります。
解答
クリックして解答を表示
問題の原因
position: fixedの要素はドキュメントフローから除外されるため、後続の要素はその存在を認識せず、ページの最上部から始まってしまいます。
fixedの特性
- ビューポートを基準に配置される
- スクロールしても位置が固定される
- ドキュメントフローから完全に除外される
- 他の要素に影響を与えない（スペースを占有しない）
修正方法
方法1: メインコンテンツにpadding-topを追加
.fixed-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 15px;
z-index: 100; /* 追加：他の要素の上に表示 */
}
.main-content {
padding-top: 60px; /* 追加：ナビの高さ分の余白 */
background-color: #f9f9f9;
}方法2: メインコンテンツにmargin-topを追加
.main-content {
margin-top: 60px; /* ナビの高さ分の余白 */
background-color: #f9f9f9;
}方法3: CSS変数で高さを管理（推奨）
:root {
--nav-height: 60px; /* ナビの高さを変数で管理 */
}
.fixed-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--nav-height);
background-color: #333;
color: white;
padding: 15px;
box-sizing: border-box;
z-index: 100;
}
.main-content {
padding-top: var(--nav-height); /* 変数を使用 */
background-color: #f9f9f9;
}position: fixedとstickyの比較
| 特性 | fixed | sticky |
|---|---|---|
| 基準位置 | ビューポート | スクロールコンテナ |
| フロー | 除外される | 維持される |
| スペース | 占有しない | 占有する |
| 余白対策 | 必要 | 不要 |
| 使用場面 | 常時固定要素 | スクロール時固定 |
覚えておくポイント
position: fixedの要素にはz-indexを設定- 固定要素の高さ分、コンテンツ側に余白を確保
- CSS変数を使うと高さの管理が楽になる
position: stickyも検討する（フローを維持）- レスポンシブ対応時は高さの変化に注意