【CSS】position: stickyが効かない原因と解決方法｜全パターン完全解説

position: sticky の基本動作

• 通常時は position: relative と同じようにドキュメントフローに従う
• スクロールして指定した閾値（top, bottom など）に達すると position: fixed のように固定される
• 親要素の範囲を超えると固定が解除される
• JavaScript不要でスクロール追従UIを実装できる

.sticky-element {
  position: sticky;
  top: 0;  /* スクロール時に画面上部に固定 */
}

<div class="container">
  <header class="sticky-header">
    サイトヘッダー
  </header>
  <main>
    <p>本文コンテンツ...（長いテキスト）</p>
  </main>
</div>

.sticky-header {
  position: sticky;
  top: 0;
  background: #ffffff;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.container {
  min-height: 200vh;  /* スクロールできる十分な高さ */
}

ポイント：position: stickyは「親要素の中でだけ固定される」というのが最大の特徴です。この仕組みを理解していないと、stickyが効かない原因を特定するのが難しくなります。

注意：IE 11ではposition: stickyは完全に非対応です。IE対応が必要な場合は、JavaScriptによるpolyfillか、position: fixedでの代替実装が必要です。ただし、2025年以降はIE対応を求められるケースはほぼありません。

.header {
  position: sticky;
  /* top の指定がない → stickyが効かない */
  background: #fff;
  padding: 16px;
}

.header {
  position: sticky;
  top: 0;  /* これが必須 */
  background: #fff;
  padding: 16px;
}

/* 上下方向で固定範囲を制限 */
.sticky-element {
  position: sticky;
  top: 0;
  bottom: 20px;
}

/* 横スクロールテーブルの最初の列を固定 */
.table-fixed-col {
  position: sticky;
  left: 0;
  z-index: 1;
}

ポイント：縦スクロールのstickyにはtopまたはbottomを、横スクロールのstickyにはleftまたはrightを指定しましょう。最も一般的な「画面上部への固定」であればtop: 0が定番です。

<div class="parent">
  <div class="sticky-nav">ナビゲーション</div>
  <div class="content">コンテンツ...</div>
</div>

.parent {
  overflow: hidden;  /* これが原因でstickyが効かない */
}

.sticky-nav {
  position: sticky;
  top: 0;
}

.parent {
  /* overflow: hidden を削除 */
}

.sticky-nav {
  position: sticky;
  top: 0;
}

.parent {
  overflow: clip;  /* hidden の代わりに clip を使う */
}

.sticky-nav {
  position: sticky;
  top: 0;
}

overflow: clip と overflow: hidden の違い

• overflow: hidden — スクロールコンテナを生成するため、stickyが効かなくなる
• overflow: clip — スクロールコンテナを生成しないため、stickyが正常に動作する
• どちらもはみ出したコンテンツを切り取る点は同じ
• overflow: clipはChrome 90+, Firefox 81+, Safari 16+ で対応

.parent {
  overflow-x: hidden;  /* 横方向のみ非表示 */
  /* overflow-y は指定しない（visible のまま） */
}

注意：overflow-x: hiddenを指定すると、ブラウザはoverflow-yを自動的にautoに変更する場合があります。この場合もスクロールコンテナが生成され、stickyが効かなくなる可能性があります。この問題を回避するにはoverflow-x: clipを使用してください。

<!-- この wrapper の overflow が原因 -->
<div class="wrapper" style="overflow: hidden;">
  <div class="layout">
    <div class="sidebar">
      <!-- stickyが効かない -->
      <div class="sticky-widget">
        ウィジェット
      </div>
    </div>
  </div>
</div>

// sticky要素の祖先でoverflowが設定されている要素を探す
let el = document.querySelector('.sticky-widget');
while (el = el.parentElement) {
  const style = getComputedStyle(el);
  if (style.overflow !== 'visible') {
    console.log('overflow発見:', el, style.overflow);
  }
}

sticky の動作サイクル

• ステップ1: 要素がスクロールで閾値に達する → 固定開始
• ステップ2: 親要素の範囲内で固定を維持
• ステップ3: 親要素の下端に達する → 固定解除（親と一緒にスクロールアウト）

<div class="sidebar">
  <div class="sticky-widget">
    追従ウィジェット
  </div>
</div>

.sidebar {
  /* 親要素にheight指定がない、またはコンテンツが少ない */
  /* → sticky要素とほぼ同じ高さになる */
}

.sticky-widget {
  position: sticky;
  top: 0;
}

<div class="layout">
  <main class="main-content">
    <!-- 長いコンテンツ -->
  </main>
  <aside class="sidebar">
    <div class="sticky-widget">
      追従ウィジェット
    </div>
  </aside>
</div>

.layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;  /* 重要: stretch ではなく flex-start */
}

.main-content {
  flex: 1;
  min-height: 200vh;  /* 長いコンテンツ */
}

.sidebar {
  width: 300px;
  align-self: stretch;  /* メインコンテンツと同じ高さに */
}

.sticky-widget {
  position: sticky;
  top: 20px;
}

ポイント：stickyが効くには「親の高さ」＞「sticky要素の高さ」である必要があります。Flexboxでalign-self: stretchを使ってサイドバーをメインコンテンツと同じ高さにすれば、stickyの固定範囲が確保されます。

.parent {
  height: 200px;  /* 明示的な高さ制限 */
}

.sticky-child {
  position: sticky;
  top: 0;
  height: 60px;
  /* 親が200px、子が60pxなので140px分しか固定されない */
}

.parent {
  /* height を削除、またはmin-heightを使う */
  min-height: 100vh;
}

.sticky-child {
  position: sticky;
  top: 0;
  height: 60px;
}

注意：前セクションの「親の高さ不足」と矛盾するように見えますが、ポイントは「sticky要素が親要素いっぱいに広がっている」かどうかです。親は十分な高さが必要ですが、sticky要素自体はコンパクトである必要があります。

<div class="flex-layout">
  <main class="main">
    <!-- 長いメインコンテンツ -->
    <p>Lorem ipsum...</p>
  </main>
  <aside class="sidebar">
    <div class="sticky-widget">
      追従ウィジェット
    </div>
  </aside>
</div>

.flex-layout {
  display: flex;
  gap: 24px;
  /* align-items: stretch がデフォルト */
  /* → .sidebar がメインコンテンツと同じ高さに引き伸ばされる */
  /* → .sticky-widget は .sidebar いっぱいに広がる */
}

.sticky-widget {
  position: sticky;
  top: 20px;
  /* stickyが効かないように見える */
}

.flex-layout {
  display: flex;
  gap: 24px;
  align-items: stretch;  /* サイドバーの高さ = メインの高さ */
}

.main {
  flex: 1;
}

.sidebar {
  width: 300px;
  /* align-self はデフォルトの stretch → 親の高さが確保される */
}

.sticky-widget {
  position: sticky;
  top: 20px;
  /* .sidebar は十分な高さがあるので sticky が正常動作 */
}

.flex-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;  /* stretch ではなく flex-start */
}

.sidebar {
  position: sticky;  /* サイドバー自体を sticky に */
  top: 20px;
  width: 300px;
}

Flexbox + sticky の正しい理解

• Flex親のalign-items: flex-start → 子要素は自身のコンテンツ高さになる
• Flex親のalign-items: stretch（デフォルト） → 子要素は親の高さいっぱいに伸びる
• サイドバーがstretchで伸びている場合、サイドバーの子要素にstickyを適用する
• サイドバーがflex-startで縮んでいる場合、サイドバー自体にstickyを適用する

/* パターン1: Grid子要素自体に sticky */
.grid-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;  /* stretch ではなく start */
}

.sidebar {
  position: sticky;
  top: 20px;
}

/* パターン2: Grid子要素は stretch のまま、孫要素に sticky */
.grid-layout-v2 {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  /* align-items: stretch がデフォルト → サイドバーの高さが確保される */
}

.sidebar-widget {
  position: sticky;
  top: 20px;
}

.vertical-layout {
  display: flex;
  flex-direction: column;
  min-height: 200vh;
}

.sticky-section-header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
  /* column方向でも top: 0 で正常に動作 */
}

span.sticky-label {
  position: sticky;
  top: 0;
  /* span はデフォルトで display: inline */
  /* → stickyが効かない */
}

span.sticky-label {
  display: block;  /* または inline-block */
  position: sticky;
  top: 0;
}

.wrapper {
  display: contents;  /* ボックスを生成しない */
}

.wrapper .sticky-child {
  position: sticky;
  top: 0;
  /* .wrapper がボックスを持たないため、stickyの親要素が変わる */
}

/* テーブルヘッダーの固定 */
thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  /* th（table-cell）でもstickyは動作する */
  /* ただし、テーブル自体のoverflow設定に注意 */
}

/* ファイルA: sticky を指定 */
.header {
  position: sticky;
  top: 0;
}

/* ファイルB（後から読み込まれる）: relative で上書き */
.header {
  position: relative;  /* sticky を上書き → stickyが効かない */
}

.sidebar {
  position: sticky;
  top: 20px;
}

/* タブレット以下でstickyが解除されてしまう */
@media (max-width: 768px) {
  .sidebar {
    position: static;  /* または relative */
  }
}

/* モバイルファーストアプローチ */
.sidebar {
  position: static;  /* モバイルでは通常配置 */
}

@media (min-width: 768px) {
  .sidebar {
    position: sticky;  /* タブレット以上でsticky有効 */
    top: 20px;
  }
}

/* 詳細度: 0-1-0 */
.header {
  position: sticky;
  top: 0;
}

/* 詳細度: 0-2-0（こちらが優先される） */
.page-wrapper .header {
  position: relative;  /* sticky を上書き */
}

/* 詳細度: 1-0-0（IDセレクタはさらに高い） */
#site-header {
  position: relative;  /* sticky を上書き */
}

/* 詳細度を合わせて上書き */
.page-wrapper .header {
  position: sticky;
  top: 0;
}

DevToolsでの確認手順

• F12でDevToolsを開く
• Elementsタブでsticky要素を選択
• 右側のStylesパネルでpositionを検索
• 取り消し線のあるposition: stickyがあれば、上書きされている
• 上書きしているルールのセレクタと詳細度を確認
• Computedタブで最終的に適用されているposition値を確認

<!-- Bootstrap 5 の sticky-top ユーティリティ -->
<nav class="sticky-top">
  ナビゲーション
</nav>

<!-- Tailwind CSS -->
<nav class="sticky top-0">
  ナビゲーション
</nav>

ポイント：CSSフレームワークを使う場合は、フレームワークが提供するstickyユーティリティクラスを使うのが安全です。カスタムCSSと競合する場合は、DevToolsで詳細度を確認しましょう。

// こうした古いスクロール固定のコードがstickyを妨げる
window.addEventListener('scroll', function() {
  const header = document.querySelector('.header');
  if (window.scrollY > 100) {
    header.style.position = 'fixed';  // stickyを上書き
  } else {
    header.style.position = 'relative';  // stickyを上書き
  }
});

/* JavaScriptでのスクロール制御は不要 */
/* position: sticky だけで同じことが実現できる */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.parent {
  transform: translateZ(0);  /* GPU高速化のためによく使われる */
  /* これにより新しい包含ブロックが生成される */
}

.sticky-child {
  position: sticky;
  top: 0;
  /* 期待通りに動作しない場合がある */
}

注意：transform、perspective、filter、will-changeなどのプロパティが親要素に設定されていると、新しい包含ブロックが生成されます。これはstickyの動作に影響を与える場合があります。ただし、多くのモダンブラウザではposition: stickyは包含ブロックではなくスクロールコンテナに基づくため、影響が出ないケースもあります。

// stickyヘッダーが固定されたかどうかを検知
const header = document.querySelector('.sticky-header');
const sentinel = document.querySelector('.sticky-sentinel');

const observer = new IntersectionObserver(
  ([entry]) => {
    header.classList.toggle('is-stuck', !entry.isIntersecting);
  },
  { threshold: [1] }
);

observer.observe(sentinel);

.sticky-header {
  position: sticky;
  top: 0;
  transition: box-shadow 0.3s ease;
}

.sticky-header.is-stuck {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.sticky-header {
  position: -webkit-sticky;  /* Safari 6.1-12 対応 */
  position: sticky;
  top: 0;
}

ポイント：2025年以降、Safari 13以降のみをサポートするなら-webkit-stickyは不要です。しかし、念のため記述しても害はないので、プレフィックスを含めておくのが安全です。

/* バウンス時のちらつきを軽減 */
.sticky-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Safariでは thead への sticky が効かない */
thead {
  position: sticky;
  top: 0;
}

/* th に直接指定すればSafariでも動作する */
thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

table {
  border-collapse: collapse;  /* Safariでsticky使用時にborderが消える */
}

thead th {
  position: sticky;
  top: 0;
  border-bottom: 2px solid #333;  /* スクロール時に消える */
}

table {
  border-collapse: separate;  /* collapse ではなく separate */
  border-spacing: 0;          /* 隙間をなくす */
}

thead th {
  position: sticky;
  top: 0;
  background: #fff;
  /* border の代わりに box-shadow を使用 */
  box-shadow: inset 0 -2px 0 #333;
}

<body>
  <div class="top-bar">お知らせバー</div>
  <header class="sticky-header">
    <nav>
      <a href="/">ホーム</a>
      <a href="/about">概要</a>
      <a href="/contact">お問い合わせ</a>
    </nav>
  </header>
  <main>
    <!-- メインコンテンツ -->
  </main>
</body>

.sticky-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #ffffff;
  padding: 12px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.sticky-header nav {
  display: flex;
  gap: 24px;
  align-items: center;
}

.sticky-header nav a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

ポイント：お知らせバーの下にヘッダーがある場合、スクロールするとお知らせバーがスクロールアウトし、ヘッダーだけがtop: 0に固定されます。z-indexを十分に大きくして、他の要素の上に表示されるようにしましょう。

<div class="blog-layout">
  <main class="blog-main">
    <article>
      <h1>記事タイトル</h1>
      <p>長い記事本文...</p>
      <!-- 非常に長いコンテンツ -->
    </article>
  </main>
  <aside class="blog-sidebar">
    <div class="sidebar-widget">
      <h3>人気記事</h3>
      <ul>
        <li><a href="#">記事1</a></li>
        <li><a href="#">記事2</a></li>
      </ul>
    </div>
    <div class="sidebar-sticky">
      <h3>目次</h3>
      <nav class="toc">...</nav>
    </div>
  </aside>
</div>

.blog-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  align-items: start;  /* 重要 */
}

.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 固定しないウィジェット */
.sidebar-widget {
  background: #f8fafc;
  padding: 20px;
  border-radius: 8px;
}

/* 追従するウィジェット */
.sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 80px;  /* ヘッダーの高さ分ずらす */
  background: #f8fafc;
  padding: 20px;
  border-radius: 8px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .blog-layout {
    grid-template-columns: 1fr;
  }
  .sidebar-sticky {
    position: static;  /* モバイルではsticky解除 */
  }
}

注意：ここでのポイントはalign-items: startです。.blog-sidebar全体ではなく、その中の.sidebar-stickyにstickyを適用しています。align-items: startにより、サイドバーはコンテンツの高さに縮みますが、Grid親の.blog-layoutがメインコンテンツと同じ行にあるため、stickyの動作範囲は確保されます。

<div class="table-container">
  <table class="sticky-table">
    <thead>
      <tr>
        <th>名前</th>
        <th>メール</th>
        <th>部署</th>
        <th>ステータス</th>
      </tr>
    </thead>
    <tbody>
      <!-- 多くの行 -->
      <tr><td>田中</td><td>tanaka@example.com</td><td>開発</td><td>在籍</td></tr>
      <!-- ... 50行以上 ... -->
    </tbody>
  </table>
</div>

.sticky-table {
  width: 100%;
  border-collapse: separate;  /* Safari対応 */
  border-spacing: 0;
}

.sticky-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  z-index: 1;
  /* border の代わりに box-shadow（Safari対応） */
  box-shadow: inset 0 -1px 0 #e2e8f0;
}

.sticky-table tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid #e2e8f0;
}

.sticky-table tbody tr:nth-child(even) {
  background: #f8fafc;
}

.table-container {
  max-height: 400px;
  overflow-y: auto;  /* コンテナがスクロール */
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sticky-table thead th {
  position: sticky;
  top: 0;  /* コンテナの上端に固定 */
  background: #0284c7;
  color: #fff;
  z-index: 1;
}

コンテナスクロールでの sticky の仕組み

• .table-containerにoverflow-y: autoが設定されると、コンテナ自体がスクロールコンテナになる
• sticky要素は、このスクロールコンテナの中で固定される
• top: 0はコンテナの上端を基準にする（ビューポートではない）
• ページ全体のスクロールではなく、コンテナ内のスクロールでstickyが動作する

<div class="sections">
  <section>
    <h2 class="section-heading">セクション1: はじめに</h2>
    <p>セクション1の内容...</p>
  </section>
  <section>
    <h2 class="section-heading">セクション2: 基本概念</h2>
    <p>セクション2の内容...</p>
  </section>
  <section>
    <h2 class="section-heading">セクション3: 実践</h2>
    <p>セクション3の内容...</p>
  </section>
</div>

.section-heading {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  padding: 16px 24px;
  margin: 0;
  font-size: 1.2em;
  color: #0369a1;
  border-bottom: 2px solid #0284c7;
  z-index: 10;
}

section {
  padding: 24px;
  min-height: 80vh;  /* 各セクションに十分な高さ */
}

<div class="page-layout">
  <main>メインコンテンツ</main>
  <aside class="sidebar">
    <div class="sticky-toc">目次</div>
  </aside>
</div>
<footer>フッター</footer>

.page-layout {
  display: flex;
  gap: 32px;
  align-items: stretch;  /* サイドバーの高さ = メインの高さ */
}

.sticky-toc {
  position: sticky;
  top: 20px;
  /* .sidebar は .page-layout 内にあるため、
     フッターに到達する前にstickyが解除される */
}

.horizontal-scroll-table {
  overflow-x: auto;
  max-width: 100%;
}

.horizontal-scroll-table table {
  min-width: 800px;
  border-collapse: separate;
  border-spacing: 0;
}

/* 最初の列を固定 */
.horizontal-scroll-table td:first-child,
.horizontal-scroll-table th:first-child {
  position: sticky;
  left: 0;  /* 横方向のsticky */
  background: #fff;
  z-index: 1;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

/* 左上のセルはヘッダー固定+列固定の両方 */
.horizontal-scroll-table thead th:first-child {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;  /* 他のstickyより上に */
}

DevTools での確認手順

• F12キーでDevToolsを開く
• Elementsタブでsticky要素を選択（要素上で右クリック → 「検証」）
• 右側のStylesパネルでposition: stickyを検索
• 取り消し線があれば、他のCSSルールに上書きされている
• Computedタブに切り替え、positionの値がstickyになっているか確認

// DevToolsのConsoleに貼り付けて実行
// sticky要素のセレクタを変更してください
(function checkStickyParents(selector) {
  const el = document.querySelector(selector);
  if (!el) {
    console.error('要素が見つかりません:', selector);
    return;
  }

  console.group('sticky デバッグ:', selector);

  // 1. position の確認
  const computed = getComputedStyle(el);
  console.log('position:', computed.position);
  console.log('top:', computed.top);

  // 2. 親要素の overflow チェック
  let parent = el.parentElement;
  let issues = [];
  while (parent) {
    const s = getComputedStyle(parent);
    if (s.overflow !== 'visible' &&
        s.overflow !== 'clip') {
      issues.push({
        element: parent,
        overflow: s.overflow,
        overflowX: s.overflowX,
        overflowY: s.overflowY
      });
    }
    parent = parent.parentElement;
  }

  if (issues.length > 0) {
    console.warn('overflow 問題のある祖先要素:');
    issues.forEach(i =>
      console.log('  ', i.element, 'overflow:', i.overflow)
    );
  } else {
    console.log('overflow の問題なし');
  }

  // 3. 親要素の高さチェック
  const parentEl = el.parentElement;
  console.log('親の高さ:', parentEl.offsetHeight, 'px');
  console.log('要素の高さ:', el.offsetHeight, 'px');
  if (parentEl.offsetHeight <= el.offsetHeight) {
    console.warn('親の高さが要素と同じか小さい → stickyが効かない可能性');
  }

  console.groupEnd();
})('.sticky-widget');  // ← セレクタを変更

Chrome DevTools の sticky デバッグ機能

• Elements パネルで sticky 要素を選択
• 要素のタグ横に「sticky」バッジが表示される
• バッジをクリックすると、sticky の固定範囲（containing block）がハイライトされる
• 固定範囲が小さすぎる場合は、親要素の高さ不足が原因

sticky が効かないときのデバッグ手順

• 1. Computed で position が sticky か確認 → Noなら「原因⑥：position の競合」
• 2. top/bottom が auto でないか確認 → autoなら「原因①：オフセット指定忘れ」
• 3. display が inline でないか確認 → inlineなら「原因⑤：displayの問題」
• 4. 祖先の overflow を確認 → visible/clip 以外なら「原因②：overflowの問題」
• 5. 親要素の高さを確認 → sticky要素と同じか小さいなら「原因③：高さ不足」
• 6. Flexbox/Gridの align-items を確認 → 「原因④：Flexbox/Grid との競合」

/* ✅ sticky を確実に動作させる条件 */
.sticky-element {
  position: -webkit-sticky;  /* 1. Safari対応 */
  position: sticky;           /* 2. sticky指定 */
  top: 0;                     /* 3. オフセット値 */
  z-index: 10;                /* 4. 重なり順 */
  background: #fff;           /* 5. 背景色（下のコンテンツが透けないように） */
}

/* ✅ 親要素の条件 */
.sticky-parent {
  /* overflow: visible（デフォルト）のまま */
  /* 十分な高さを持つ（min-height 推奨） */
  min-height: 100vh;
}

/* ✅ 祖先要素に overflow: hidden が必要な場合 */
.ancestor {
  overflow: clip;  /* hidden の代わりに clip を使用 */
}

ポイント：stickyが効かないときは、まずDevToolsでpositionの値とtopの値を確認し、次に祖先要素のoverflowをチェックしましょう。ほとんどの問題はこの2ステップで原因を特定できます。