【CSS】スクロールしても要素を常に表示させることができる『position: sticky;』の使い方を解説

「スクロールしても特定の要素を常に表示させたいな」

今回はそれを可能にすることができるpostion: sticky;について解説していきます。

基本的な使い方

See the Pen Untitled by masata (@masata_lm) on CodePen.

.side {
  position: sticky;
  top: 0;
  width: 30%;
  height: 300px;
  color: #fff;
  background: #000;
}

今回はサイドコンテンツを固定表示していますが、このような形でposition: sticky;を指定しつつ、topやleftなどで固定する位置を指定します。

position: sticky;が効かないとき

親要素のoverflowの値が適切ではない

position: sticky;を指定するときは親要素のCSSのoverflowの値を確かめましょう。

overflow: visible;以外だと正しく表示されなくなるので注意が必要です。