問題4: stickyが動作しない

Question

問題

position: stickyを設定したのに、スクロール時に要素が固定されません。

HTML

<div class="wrapper">
  <div class="sidebar">
    <h3 class="sticky-header">目次</h3>
    <ul>
      <li><a href="#">セクション1</a></li>
      <li><a href="#">セクション2</a></li>
      <li><a href="#">セクション3</a></li>
    </ul>
  </div>
  <div class="content">
    <p>長いコンテンツ...</p>
  </div>
</div>

CSS

.wrapper {
  display: flex;
  gap: 20px;
  height: 400px;
  overflow: auto;  /* スクロール可能 */
}

.sidebar {
  width: 200px;
  overflow: hidden;  /* 問題の原因 */
}

.sticky-header {
  position: sticky;
  top: 0;
  background-color: #2196F3;
  color: white;
  padding: 10px;
  margin: 0;
}

.content {
  flex: 1;
  padding: 20px;
}

実行結果

問題の原因

サイドバー（.sidebar）にoverflow: hiddenが設定されているため、stickyが正しく動作していません。stickyは親要素のスクロールコンテナ内でのみ動作し、overflowが設定された親要素によって制限されます。

position: stickyが動作しない主な原因

親要素のoverflow：hidden/auto/scrollが設定されている
高さの指定なし：親要素に明確な高さがない
top/bottom等の未指定：固定位置が指定されていない
親要素の高さ不足：スティッキー要素が親要素いっぱいに広がっている

修正方法

方法1: 親要素のoverflowを削除

.wrapper {
  display: flex;
  gap: 20px;
  height: 400px;
  overflow: auto;
}

.sidebar {
  width: 200px;
  /* overflow: hidden; を削除 */
}

.sticky-header {
  position: sticky;
  top: 0;
  background-color: #2196F3;
  color: white;
  padding: 10px;
  margin: 0;
  z-index: 10;  /* 追加：他の要素の上に表示 */
}

修正後の結果

position: stickyの正しい使い方

/* ✅ 基本的な使用例 */
.sticky-element {
  position: sticky;
  top: 0;  /* 必須：固定位置の指定 */
  z-index: 10;  /* 推奨：重なり順序 */
}

/* ✅ テーブルヘッダーの固定 */
thead th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

/* ✅ サイドバーの固定 */
.sidebar-nav {
  position: sticky;
  top: 20px;  /* 上部に余白を持たせる */
  max-height: calc(100vh - 40px);
  overflow-y: auto;  /* 内部スクロール */
}

/* ❌ 動作しない例 */
.parent {
  overflow: hidden;  /* これがあるとstickyが効かない */
}
.child {
  position: sticky;
  top: 0;
}

stickyのデバッグチェックリスト

確認項目	問題	解決策
親要素のoverflow	hidden/auto/scroll	削除またはvisibleに変更
位置の指定	top/bottom/left/right未指定	少なくとも1つ指定
親要素の高さ	子要素と同じ高さ	親要素に十分な高さを確保
祖先要素のoverflow	どこかにoverflow設定	全祖先要素を確認
ブラウザサポート	古いブラウザ	ポリフィルまたは代替手段

覚えておくポイント

親要素のoverflow設定を必ず確認
top、bottomなどの位置指定は必須
DevToolsで祖先要素のoverflowを順番に確認
stickyはfixedと違い、親要素のスペースを占有する
スクロールコンテナの範囲内でのみ動作

問題4: stickyが動作しない

問題

HTML

CSS

実行結果

目次

🔧 実際に試してみよう（リアルタイム更新）

ヒント

解答

問題の原因

position: stickyが動作しない主な原因

修正方法

方法1: 親要素のoverflowを削除

修正後の結果

目次

方法2: 必要な場合はoverflow: visibleを明示

position: stickyの正しい使い方

stickyのデバッグチェックリスト

覚えておくポイント