要素を固定させたいときに。position: sticky; の使い方を紹介！

要素を一定の場所に常に表示させたい！

そんな時ってありますよね！
例えば、こんな時・・・

• 「TOPへ戻る」ボタンを作りたい時
• ネットショップなど外部サイトへの導線を作りたい時
• キャラクターなどを置いて遊び心を出したい時

今回、常に右下に「TOPへ戻る」ボタンが表示されるようにしてみました。

▼デモ映像です。
右のバナナが常に右下に表示され、フッターに到着したらそこで止まっているようにしてみました。

冒頭に戻りますが、「要素を一定の場所に常に表示させたい」時、とても簡単なcssがあります！

解決方法

　「position: sticky;」

これを使ってみましょう。

最初「position: sticky;」を知ったときは、難しそうかも？と感じたのですが、めっちゃカンタン、めっちゃ便利なcssでした
positionと聞くと、absoluteやrelativeを使うんでしょ？？とお思いでしょうが、そんなことないです。デモ実装の手順を次から解説します。

実装方法

上記のデモ実装の実装手順は、まずは、バナナを、フッター上部に配置します。
下図のように、
　<footer class="footer">　
の直前に置きました。

そうすることで、フッターの上部に（赤い線まで）置くことができます。

そして、右下に配置したいので、cssを記述します。

.TopBanana-wrapper {
    display: flex;
    justify-content: flex-end;
}

この段階で、右下にバナナが表示されますが、下のデモ実装を見ると常に右下に表示はされない状態です。

ここで、やっと

　「position: sticky;」

の出番です！！！

.TopBanana-wrapper {
    display: flex;
    justify-content: flex-end;
    padding-right: 27px;
    position: sticky;
    bottom: 10px;
    left: 0;
}

上のcssのように、

　「position: sticky;」

を記述して、あとは位置をbottomなどで調整すれば、すぐに実装ができます。
とても簡単なので、ぜひ試してみてくださいね