【CSS】position: stickyが効かない原因と解決策

既存のサイトに、Tableのヘッダ行を固定した表をposition: stickyを使い追加したかったのですが、全く固定されず、原因究明にすごく時間がかかってしまったので、その原因と解決策です。

position: stickyが効かない原因

先祖要素に指定していたoverflow: hiddenが原因でした。
先祖要素のoverflowに初期値（visible）以外が指定されている場合、
stickyは無効化されるようです。

(参考)
position - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/position

解決策

今回実装した既存のサイトが、先祖要素に指定したoverflow: hiddenを削除すると崩れてしまうため、変更はできませんでした。
先祖要素のoverflow: hiddenは残したまま、ヘッダ行を固定する方法です。

<実装サンプル>

この図のように、tableの外側を縦スクロールが表示されるように、overflow-y: scroll を指定した要素で囲み、その要素内でtableのヘッダ行が固定されるようにしました。

まずは、
▼overflow: hiddenが先祖要素に無い場合（通常パターン）

HTML

<div class="l-main">
 <table>
   <thead>
     <tr>
       <th></th>
       <th>Heading---1</th>
       <th>Heading---2</th>
       <th>Heading---3</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>item---1</td>
       <td>Lorem ipsum dolor sit amet.</td>
       <td>Lorem ipsum dolor sit amet.</td>
       <td>Lorem ipsum dolor sit amet.</td>
     </tr>
     <!--省略-->
   </tbody>
 </table>
</div>

CSS
thタグを画面上部に来たら固定されるように設定します。

th{
   position: sticky;
   top: 0;
}

▼overflow: hiddenが先祖要素にある場合

HTML
通常パターンのtableの外側を縦スクロールが表示されるように、overflow-y: scrollを指定した要素で囲みます。

<div class="sticky-scroll">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>Heading---1</th>
        <th>Heading---2</th>
        <th>Heading---3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>item---1</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>Lorem ipsum dolor sit amet.</td>
      </tr>
      <!--省略-->
    </tbody>
  </table>
</div> 

CSS
tableの外側に縦スクロールが出るように高さ、スクロールを設定します。
その他は、通常パターンと同じです。

.sticky-scroll{
   overflow-y: scroll;
   width: 100%;
   height: 60vh;
}

参考リンク

こちらの記事を参考にさせていただきました。
CSSのposition: stickyでテーブルのヘッダー行・列を固定する
https://qiita.com/orangain/items/6268b6528ab33b27f8f2