CSSで要素を画面の最下部に固定したい、けど最後までスクロールしたらちょっと上に動かしたい

CSSはコーダーさんに任せっぱなしてあまり自分で書くことがなかったのですが、このままではいかんと思って、最近できるだけ自力で書くようにしています。学ぶことが多いです。

要素(ボタン)を画面の最下部に固定したい。けど、最後までスクロールしたらちょっと上に動かして余白を持たせたい。最下部にオーバーレイでバナーを表示したりすることもあるので、最後は余白があったほうが操作しやすいかと思って。

言葉で表すと分かりにくいですが、デモを見てもらえればわかると思います。 CSSを調べるときは、「ちょっと上に動かす」とかをなんて言葉でググったらいいん？と苦労します。笑

なんとなく position: sticky; とかを使えばいいのかな〜とは思ったのですが、上に固定するのはよく出てくるけど下に固定はあまり出てこない…。

See the Pen sticky-bottom by aya-cat-g (@tungtun) on CodePen.

参考サイトを元に自分で考えてみました。キモとなるのはこの部分。

.submit-button {
  width: 100%;
  position: sticky;
  bottom: 0;
  padding: 1rem;
}
.blank {
  height: 8rem;
  width: 100%;
}

position: sticky; と bottom: 0; で要素を下に固定していますが、その下に空のdivを置いてheightを指定しました。空のdivを置いているところが、あんまり綺麗なやり方ではないとは思うのですが…。他にいい方法があったら教えていただきたいです！😢

それにしても、stickyとか、最近のCSSは便利ですね…✨

のこのこかずのこ