positionの役割とレパートリー
positionはウィンドウのどの位置に配置するかというのを指定できるcssプロパティです。
positionにはstatic、relative、absolute、fixedと4種類のレパートリーがあります。
つい最近までstickyの存在を知らなかったのですがとても便利なので使用方法を書いていこうと思います。
position:stickyとは
stickyはウィンドウに表示されたあとスクロールしていっても固定表示させることができます。
和訳するとねばねばとベタつく、粘着するというような意味で、
stickyを記載した部分だけウィンドウにくっつく(スクロールしてもウィンドウ上に固定表示される)ようなニュアンスです。
とても便利だけど動かなくなるケースもあります。
それを以下に説明します。
制約① 子要素がこれのみだと動かない
position:stickyは兄弟要素の上でしか固定表示ができません。
兄弟要素がなく1つしか子要素を入れていない状態だと固定表示して上を通れる兄弟要素がないため、機能しません。
制約② 親要素の中でしか機能しない
position:stickyを指定すると自動的に親要素をstickyの箱と定義します。
箱のなかでしか固定表示されないので、親要素以外の部分になるとフレームアウトします。
制約を理解してつかいやすいメニューバーを作ろう
ウィンドウ上部に追従してくるメニューバーは操作のしやすさからオウンドメディアやブログなどによく見かけるようになりました。
他の方法で固定しても問題ないけど、stickyを知っているかどうかで作業効率が上がりそうだなと思ったので記事にしました。