#81 position:stickyでパララックス

スクロールする度に、下の要素が上にかぶさっていくUIを調べてみたらposition:sticyがいいらしい。stickyは直訳するとネバネバするという意味。
position:ネバネバする（指定した位置にひっつく）という動きを実現できる。

position:stickyを理解するにはsticky itemとsticky containerを理解する必要がある。sticky itemはposition:stickyをかけたエリア。そしてsticky containerは
sticky itemの親要素。sticky itemはsticky containerの中でだけひっつく。
ちょうど、position:absoluteと親要素のposition:relativeの関係に似ているかも。

position: sticky;の仕組みや実際の使い方をやさしく解説

たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方

デモ

ヘッダーはスーラの芝刈り（Mower)