CSS position:stickyの使い方と動かない時の対処法

2022年9月7日

今回はpositionプロパティの値の1つであるposition: stickyの使い方を解説していきます。

stickyを利用すると、javascriptなしで、表テーブルやサイドバーの特定要素の位置を途中で固定することができるので便利です。

1 position: stickyとは？スティッキーアイテム・コンテナについて
2 position: stickyの使い方
3 スティッキーアイテム・コンテナの動作の特徴
4 (応用)position: sticky使った表テーブルの左端列を固定
5 まとめ
6 YouTubeチャンネル開設しました！

※なお、本記事ではpositionプロパティのstatic・relative・absolute・fixedの使い方について解説していません。
これらについては【初心者向け】CSS positionで位置指定でする方法・使い方」をご参照ください。

position: stickyとは？スティッキーアイテム・コンテナについて

まずはposition: stickyの概要について紹介します。

position: stickyを使用することで、以下のように画面の途中から要素をウィンドウ上にくっつけたりすることができるようになります。

なおstickyが指定された要素のことをスティッキーアイテム、その親要素のことをスティッキーコンテナと呼びます。

<aside> /* スティッキーコンテナ */
  <div class="sidebar-element se1">
    サイドバー要素1
  </div>
  <div class="sidebar-element se2">
    サイドバー要素2
  </div>
  <div class="sidebar-element se3"> /* スティッキーアイテム */
    サイドバー要素3
  </div>
</aside><br>

<aside> /* スティッキーコンテナ */

サイドバー要素1

</div>

サイドバー要素2

</div>

<div class="sidebar-element se3"> /* スティッキーアイテム */

サイドバー要素3

</div>

</aside><br>

.se3 {
  position: sticky;
  top: 0px;
  background-color: rgb(84, 175, 255); 
}

.se3 {

position: sticky;

top: 0px;

background-color: rgb(84, 175, 255);

}

上の例では「サイドバー要素3」と書かれたdivタグがスティッキーアイテム、全体を囲っているasideタグがスティッキーコンテナとなります。

■(参考)position: stickyのブラウザ対応状況

現在ではIE(Internet Explorer)を除くほとんどの主要ブラウザに対応しています。

position: stickyの使い方

つぎに、stickyの使い方を紹介していきます。

stickyを使って要素を固定させたい場合、固定させたい要素に対して「position: sticky」を指定し、縦スクロール時の場合はtopやbottomプロパティ、横スクロール時の場合はleftやrightプロパティといった位置指定のプロパティを指定します。

■position: stickyの使い方

固定させたい要素に対して「position: sticky」を指定する
縦スクロール時の場合はtopやbottom、横スクロール時の場合はleftやrightなどの位置指定プロパティを指定する

<body>
  <header>Header</header>

  <div class="container">
    <div class="flex-wrap">
      <main>Main Contents</main>
      <aside>
        <div class="sidebar-element se1">サイドバー要素1</div>
        <div class="sidebar-element se2">サイドバー要素2</div>
        <div class="sidebar-element se3">サイドバー要素3</div>
      </aside>
    </div>
  </div>
</body>

<body>

<header>Header</header>

<main>Main Contents</main>

<aside>

<div class="sidebar-element se1">サイドバー要素1</div>

<div class="sidebar-element se2">サイドバー要素2</div>

<div class="sidebar-element se3">サイドバー要素3</div>

</aside>

</div>

</body>

body {
  text-align: center;
}

.container {
  width: 1000px;
  margin: 0 auto;
}

header {
  background-color: pink;
  line-height: 80px;
  margin-bottom: 60px;
}

.flex-wrap {
  display: flex;
  justify-content: space-between;
}

main {
  background-color: bisque;
  line-height: 2000px;
  width: calc(60% - 30px);
}

aside {
  width: calc(40% - 30px);
}

.sidebar-element{
  line-height: 300px;
  margin-bottom: 30px;
}

.se1{
  background-color: rgb(198, 229, 255);
  position: sticky;
  top: 0;
}

.se2{
  background-color: rgb(172, 214, 251);
}

.se3{
  background-color: rgb(129, 192, 247);
}

body {

text-align: center;

}

.container {

width: 1000px;

margin: 0 auto;

}

header {

background-color: pink;

line-height: 80px;

margin-bottom: 60px;

}

.flex-wrap {

display: flex;

justify-content: space-between;

}

main {

background-color: bisque;

line-height: 2000px;

width: calc(60% - 30px);

}

aside {

width: calc(40% - 30px);

}

.sidebar-element{

line-height: 300px;

margin-bottom: 30px;

}

.se1{

background-color: rgb(198, 229, 255);

position: sticky;

top: 0;

}

.se2{

background-color: rgb(172, 214, 251);

}

.se3{

background-color: rgb(129, 192, 247);

}

上の例では「se1」というクラス名を持つdivタグに対して「position: sticky」を指定している為、こちらが「スティッキーアイテム」その親要素であるasideタグが「スティッキーコンテナ」となります。

これでスティッキーアイテム(サイドバー要素1)がスクリーンの上部(top:0)に到達した時、こちらがスクリーン上に固定されるようになります。

また、下の方の要素に「position: sticky」「bottom: 0」を指定してあげると、スティッキーアイテムがスクリーンの下部(bottom:0)に到達した時、固定されるようにすることも可能です。

.se1{
  background-color: rgb(198, 229, 255);
}

.se2{
  background-color: rgb(172, 214, 251);
}

.se3{
  background-color: rgb(129, 192, 247);
  position: sticky;
  bottom: 0;
}

.se1{

background-color: rgb(198, 229, 255);

}

.se2{

background-color: rgb(172, 214, 251);

}

.se3{

background-color: rgb(129, 192, 247);

position: sticky;

bottom: 0;

}

スティッキーアイテム・コンテナの動作の特徴

つぎに、position:stickyで設定したスティッキーアイテム・コンテナの動作の特徴を紹介します。

■スティッキーアイテム・コンテナの特徴

(特徴. 1) スティッキーアイテムはコンテナ内でのみ固定される
(特徴. 2) スティッキーアイテムは高さを有する
(特徴. 3) スティッキーアイテムは重なり順をz-indexで指定できる

スティッキーアイテムはコンテナ内でのみ固定される

「position: sticky」を指定した要素は、fixedを指定した要素と同様、要素をスクリーン上のある位置に固定させて表示させることができます。

ただし、スティッキーアイテムはスティッキーコンテナ内でのみスクリーン上に固定されて移動することが可能です。

例えばサイドバー(例ではこれがスティッキーコンテナ)に対して「height: 1000px」などのように固定値を使った指定をしている場合は、指定した値より下にスクロールするとアイテムがそれより下には付いてこなくなります。

スティッキーアイテムは高さを有する

「position: sticky」を指定した要素は、position:absoluteやfixedを設定した要素と違って高さを有します。

これはstickyを指定して要素の位置を指定した位置に変更したとしても変わりません。

■通常のstatic・relativeを指定した要素と同様に高さがあります。

スティッキーアイテムは重なり順をz-indexで指定できる

スティッキーアイテムが複数あって重なる場合は、HTMLファイル内下の方に記述されている要素の方が上に重なっていきます。

なお、この重ね順に関してはz-indexを使用することで変更することが可能です。

以下はサイドバーに配置している要素3つに「position: sticky」「top: 0」を指定した例になります。

.se1{
  background-color: rgb(198, 229, 255);
  position: sticky;
  top: 0;
}

.se2{
  background-color: rgb(172, 214, 251);
  position: sticky;
  top: 0;
}

.se3{
  background-color: rgb(129, 192, 247);
  position: sticky;
  top: 0;
}

.se1{

background-color: rgb(198, 229, 255);

position: sticky;

top: 0;

}

.se2{

background-color: rgb(172, 214, 251);

position: sticky;

top: 0;

}

.se3{

background-color: rgb(129, 192, 247);

position: sticky;

top: 0;

}

z-indexプロパティ

positionなどでフロートしている要素の重ね順を指定することができるプロパティ

デフォルトでHTMLファイル内下の方に記述されている要素の方が上に重なるのは「position: absolute」でフロートさせた要素を重ねた場合と同じですね。

overflow:hiddenでうまく動かない場合

なお、「position: sticky」は、stickyを指定した要素の親(あるいは先祖要素)にoverflow: hidden ;の指定があると効かない場合があるので注意しましょう。

厳密には親(先祖)要素に「overflow」「overflow-x」「overflow-y」のvisible以外の値が指定されていると効かなくなります。
(関連記事)【CSS overflowの使い方】hiddenやscrollの違い

(応用)position: sticky使った表テーブルの左端列を固定

最後にposition: stickyの実際の使用例として、stickyを使って左端のセルだけ追従するテーブルの実装方法を紹介します。

<div class="table-scroll">
  <table>
    <tbody>
      <tr>
        <th scope="row">見出し</th>
        <td>ここにテキストが入ります </td>
        <td>ここにテキストが入ります </td>

      </tr>

      <tr>
        <th scope="row">見出し</th>
        <td>ここにテキストが入ります </td>
        <td>ここにテキストが入ります </td>
      </tr>
    </tbody>
  </table>
</div>

<table>

<tbody>

<tr>

<td>ここにテキストが入ります </td>

</tr>

<tr>

<td>ここにテキストが入ります </td>

</tr>

</tbody>

</table>

</div>

.table-scroll {
  overflow-x: scroll;
}

table {
  width: 1000px;
}

table,
th,
td {
  border: 1px solid #333;
}

tbody th {
  background-color: #36a93b;
  color: #fff;
  width: 200px;
  position: sticky;
  left: 0;
}