position: sticky;が効かない！というときはこちらの記事をご覧ください。CSSのposition: sticky;はとても便利なプロパティですが、ちょっとしたポイントを押さえていないと効かないことがよくあります。 この記事では、stickyの基本から、うまく効かない原因とその対処法までをわかりやすく解説します。サンプルページ付きなので、実際の挙動も見ながら確認できますよ。 position: sticky;とはどんなものか？ stickyはその名のとおりsticker（ステッカー）のように、要素を指定した位置へ「くっつける」ことのできる値です。 sticky以外のpositionプロパティの値 CSSのpositionプロパティでよく使われる値は以下の5つです。 static（初期値） 通常の配置。位置指定はできない relative（相対位置） 通常の配置を基準として、top・leftなどで位置指定ができる absolute（絶対位置） 特定の親要素を基準として位置指定ができる fixed（固定位置） 画面を基準として決まった位置に固定できる sticky スクロールで指定した位置にくると固定される stickyはabsoluteとfixedを合わせたような、ハイブリッドな動きをするのが特徴です。 position: sticky;の使いどころ position: sticky;はその特徴から、例えば追従ヘッダや固定サイドバー、また最近一般的になりつつあるパララックス風の動きなどによく使われます。 このWebサイトでもヘッダとサイドバーにposition: sticky;を使っています。が！実は実装するのにかなり苦労しました… そこでここからはposition: sticky;がうまくきかない時のチェックポイントを、実際のデモページを見ながら確認していきます。 サンプルページの解説 実物を見るのが何より早い！ということで追従ヘッダと固定サイドバーのあるサンプルページをつくりました。 See the Pen Scroll-Responsive Header & Sticky Sidebar by Aizawa Web Design (@AizawaWebDesign) on CodePen. サンプルページには以下の動きを付けました。 ではこのページをもとにして、stickyをきちんと機能させるためのポイントを見ていきましょう！ ポイント①stickyアイテムに位置の指定があるかどうか 以下はサンプルページのヘッダ部分のHTML構造です。 ヘッダの中にサイトタイトルとナビゲーションメニューが入っています。続いてCSS側です。 ヘッダ全体にposition: sticky;が指定されています。position: sticky;の書かれた要素をstickyアイテム、その親要素をstickyコンテナと呼びます。 ということはこの例だと ということになりますね。 … Continue reading position: sticky; が効かない3つの原因と対処法【CSS初心者にもわかりやすく解説】