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

Tech, 作ってみた, 設計

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

Tech, 作ってみた, 設計

Posted by kyogom