【CSS】「position: sticky」について簡単に解説。【分かりやすい】

CSSの「position: sticky」について簡単に教えてほしい。

この記事はこのような方へ向けて書いています！

それでは、サクッとこの記事で「position: sticky」の使い方を学習しちゃって下さい！

また、下の動画で「position」プロパティについて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

「position: sticky」を使うと、何ができるの？

「position: sticky」を使うことで、一定区間の間だけ、要素を画面上に固定することができます。

たとえ画面をスクロールしたとしても「画面上の一定の位置に」要素を固定することができます。

説明付きリストを作ってみました。

背景色がグレーの要素に注目してみて下さい。

スクロールすると「一定区間の間だけ」画面上に固定されていると思います。

このようなものが簡単に作れるのが「position: sticky」です！

なるほど！イメージができたよ！

どのように「position: sticky」は使うのか？

では、具体的にどのような仕組みで要素を一定区間の間だけ固定するのか、書いていこうと思います。

仕組み自体は簡単ですのでサクッといきましょう！

固定したい要素に「position: sticky」と指定する。

.gray {
    position: sticky;
  }

まずは、この様に書きます。

ですが、このままでは特に何も起きないので、他のプロパティと一緒に使います。

他のCSSのプロパティを一緒に使って、要素の位置を指定する。

「position: sticky」と指定した要素を、どこに固定するか指定するには、下記のCSSのプロパティを一緒に使います。

これらの中の１つと一緒に使う感じですね。

「top: 0」と一緒に使うとどうなる？

「top: 0」と一緒に使うと、ウィンドウの上端に「position: sticky」と指定した要素が来たタイミングで、その要素はそこで固定されます。

ここで注意してほしいのは、「ウィンドウの上端」ということですね。

「top: 10px」とすると、ウィンドウの上端から「10px」下がった位置に、要素の上端がきたタイミングからそこで要素が固定されます。

固定できるのは、親要素の範囲内です。

<ul>
        <li class="s">sticky</li>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
      </ul>

ul {
    list-style: none;
    margin: 20px;
    border: 4px solid black;
  }
  .s {
    background-color: gray;
    color: white;
    padding: 10px;
    position: sticky;
    top: 10px;
  }

この様なコードを書いたとします。

※HTMLの要素は、上記のコードの部分が10個になるように複製しています。

すると、下の動画のようになります。

この様に、背景色がグレー色の要素は、一定区間の間だけ、「top: 10px」なので、画面の上端から「10px」下の位置に、要素の上端がきたタイミングで、そこで固定されています。

その一定区間とは、「親要素の範囲内」です。

たしかに、そうなってるね！

「ーの値」も設定できる。

「top」「left」「bottom」「right」には「ー(マイナス)の値」も設定できます。

どうなるかと言うと、「 + (プラス) の値」を設定した時とは、反対の方向へ要素が動きます。

ここまでで、基本的な「position: sticky」の使い方が伝わったと思います！なかなか便利そうですよね～。

「top」と「bottom」が両方設定されていた場合はどちらが優先されるの？

「top」と「bottom」という２つのプロパティがどちらも設定されていた場合は、それらが対抗しまうので、どうなるの？

結論、「top」が優先されます。

「bottom」が効かない！とならないようにです！

「left」と「right」が両方設定されていた場合はどちらが優先されるの？

結論、日本語などでは基本的に「left」が優先されます。

詳しくは、「direction」プロパティの値が、「ltr」の場合は、「left」が優先されます。

逆に、「direction」プロパティの値が、「rtl」の場合は、「right」が優先されます。

日本語や英語などは、テキストは左から右に流れていくので、意識しなくても「left」が優先されますね。

ペルシャ語、アラビア語、ヘブライ語などの、書字方向が右から左の言語などでは、「direction」プロパティの値に「rtl」が使われると思うので、「right」が優先されます。

「left」が優先される！と覚えておけば基本的に問題はなさそうだね！

まとめ。

「position: sticky」を使うことで、要素を「一定区間の間だけ」画面に固定することができます。

具体的な使い方としては、まず、固定したい要素に「position: sticky」と指定します。

そして、要素を固定する位置を決定するには、下記の他のCSSプロパティと一緒に使います。

• top
• left
• bottom
• right

そして、要素の配置に使う基準はウィンドウとなります。

また、「top」などのプロパティには、「 ー （マイナス）の値」も使うことができます。

「top」と「bottom」が両方設定されていた場合は、「top」が優先される。

「left」と「right」だと、基本的に「left」が優先される。厳密には、これは「direction」プロパティによって変わる。

また、下の動画で「position」プロパティについて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは、こんな感じでこの記事を終わります！

ではまた！