【CSS】要素(オブジェクト)を固定する方法

要素(オブジェクト)を固定する2つの方法

要素を固定するCSSは、主に以下の2つです。

• 「position: fixed;」・・・指定した位置で要素を固定
• 「position: sticky;」・・・親要素のスクロールに応じて要素が固定

では、詳しく見ていきましょう。

position: fixed で固定する方法

まずは、position: fixed;で固定する方法についてです。

position: fixed;を当てた要素は、ページが開くのと同時に表示され、スクロール時も指定した位置にとどまって表示されます。

position: fixed;で固定していない場合

赤色のボックスに注目してください。

固定しない場合は、スクロールと同時に要素も上へ流れてしまいます。

position: fixed;で固定した場合

同じく赤のボックスに注目してください。

position: fixedで固定すると、スクロールしても画面上から消えず上部で固定されています。

先の要素にfixedを指定した場合、後の要素がその要素に被さってしまうので、その場合は「z-index」プロパティを活用して重ね合わせの順序を指定しましょう。

書き方は以下の通りです。

固定したい要素の名前やクラス名 {
  position: fixed;
  top: 0px;/*自分が固定したい位置(例は上から0pxの位置)*/
  left: 10px;/*自分が固定したい位置(例は左から10pxの位置)*/
}

位置は、top、bottom、left、rightで指定できます。

position: sticky で固定する方法

続いて、position: sticky;で固定する方法についてです。

position: sticky;を当てた要素は、スクロールに応じて親要素の範囲内で位置を固定できます。

position: sticky;で固定していない場合

黄色のボックスに注目してください。

stickyで固定しない場合は、スクロールすると青色の親要素とともに黄色の子要素も上へ流れてしまいます。

position: sticky;で固定した場合

position: sticky;で固定すると、青色の親要素が表示されている間は黄色の子要素も指定した位置で表示されています。親要素の幅/高さ分を過ぎると、スクロールとともに流れていきます。

書き方は以下の通りです。

セレクタ(固定したい要素の名前やクラス名) {
      position: sticky;
      top: 0px;/*自分が固定したい位置*/
    }

position: sticky ;を指定した要素の親要素にoverflow: hidden ;(要素からはみ出た部分は見えなくなる)がついていると機能しないので注意しましょう。

まとめ

今回は要素の固定の方法について解説しました。それぞれの違いを理解して正しく使用しましょう。