cssでヘッダーをどんどん重ねる – position: sticky応用編

position : stickyをうまくつかって、要素が上下に接するように制御します。

動作イメージ


Demo

See the Pen stick-headers by kyogom (@kyogom) on CodePen.light

position : stickyでトリッキーなところ

stickyな要素が複数ある場合に、それぞれの共通の親要素がブロック要素か、インライン要素かで挙動が異なる。
下記のDemoで50行目の display: inline;を削除して右下の「Rerun」をクリックするとわかるが、親がインライン要素だと、上の要素が押し出される動きをする。

See the Pen QXpxwW by kyogom (@kyogom) on CodePen.light

コメントを残す

あなたのメールアドレスは公開されません。必須項目には印がついています *

© 2022 Be full stack | WordPress Theme: Annina Free by CrestaProject.