2022.05.14

HTML・CSS

positionプロパティのstickyの使い方

positionプロパティのstickyの使い方と注意点です。divタグに以下のCSSを適用して動作を確認します。

.div01 {
  position: sticky;
  top: 0;
}

デモページはこちら

positionプロパティのstickyは以下の特徴があります。

要素の高さ(フロートするか)

static、relative:要素に高さがあるためフロートしません。
absolute、fixed:要素に高さがないためフロートします。
sticky:要素に高さがあるためフロートしません。ただし指定位置(top、leftプロパティ)の条件を満たすと、要素の高さがなくなりフロートします。

位置指定時(top、leftプロパティ指定時)の基準要素

static、relative:通常配置される位置が基準となります。
absolute:relativeを指定した親要素が基準となります。
fixed:ウインドウ全体が基準となります。
sticky:ウインドウ全体が基準となります。

sticky使用時の注意点

・位置指定(top、leftプロパティ)が必要です。ウィンドウ全体からの位置が指定されていないと、ページスクロール時に指定位置の条件が満たせず要素が追従しません。

デモページはこちら

・親要素にoverflow: hidden;が指定されている場合、ページスクロール時に要素が追従しません。

デモページはこちら

・ページスクロール時、親要素の高さの範囲内で要素が追従します。親要素の高さとstickyを指定した要素の高さが同じ場合は追従しないので注意が必要です。

デモページはこちら

・stickyを指定した要素の高さがウィンドウの高さを超えた場合、ページスクロール時にウィンドウの高さを超えた部分が表示できません。一番下までスクロールすると表示されます。

デモページはこちら

関連記事

2020.12.28

HTML・CSS

CSSロードアニメーションの実装【円の一部分の色を回転】

デモページはこちら 円の一部分の色が回転する動作のCSSロードアニメーションを実装します。ローダーの見た目は全てCSSで実装するため、svgは使用しません。 h…

2020.07.05

HTML・CSS

rubyタグでテキストにルビ(ふりがな)を振る

rubyタグとrtタグの二つを使ってテキストにルビ(ふりがな)を振ります。rtタグはふりがな、rubyタグはテキストとふりがな(rtタグを含む)の両方を囲います…

2024.06.18

HTML・CSS

z-index: -1;指定時の注意点

z-indexプロパティの重なりで、z-index: -1;を指定した時の注意点を確認します。デモページはこちら 以下のhtml構造で確認します。クラス名div…

2025.08.12

HTML・CSS

background-clipを利用したグラデーションのテキスト

background-clip: textを利用してグラデーションのテキストを表示します。デモページはこちら 以下のhtml構造で確認します。グラデーションのテ…

2024.09.09

HTML・CSS

border-radiusプロパティを利用した要素サイズいっぱいの角丸

border-radiusプロパティを利用して、要素サイズいっぱいの角丸を作成します。デモページはこちら まず正方形にborder-radius: 50%を指定…

上に戻る