position:sticky 使い方 ・動かない時の対処法 う

CSS

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

2022年6月28日

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

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

position: stickyを使って要素を途中から追尾させている例

 

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

 

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

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

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

position: stickyを使って要素を途中から追尾させている例
 

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

スティッキーアイテムとコンテナを解説した図
 

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

 

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

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

position: stickyのブラウザ対応状況

 
 

position: stickyの使い方

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

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

■position: stickyの使い方

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

position: stickyを使って上部にある要素を固定させている例

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

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

「se1」というクラス名を持つdivタグがスティッキーアイテム、その親要素であるasideタグがスティッキーコンテナ

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

position: stickyを使って下部に要素を固定させている例

 

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

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

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

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

 

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

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


 

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

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

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

 

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

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

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

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

 

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

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

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

以下はサイドバーに配置している要素3つに「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を使って左端のセルだけ追従するテーブルの実装方法を紹介します。

stickyを使って左端のセルだけ追従するテーブル

こちらは「position: fixed」を使っても実装は可能ですが、fixedの場合だと1列目の下に2列目以降のセルが入り込んでしまうため、stickyを使った方が簡単にできます。

 

 

まとめ

まとめです。今回はpositionプロパティの値の1つである「position: sticky」の使い方を紹介しました。

position: stickyが使用できるようになると途中から追尾してくるサイドバーなどをCSSのみで実装することができるようになります。

position: stickyを使って要素を途中から追尾させている例

使えるようになると非常に便利ですので、ぜひ覚えておきましょう。

今回は以上になります。最後までご覧頂き、ありがとうございました。
 


 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-CSS