Safariでposition: stickyが効かない？display: blockで対処

という問題の対処法を紹介します。

display: inline-block（display: inline-flex）を指定していると効かない

position: stickyとdisplay: inline-block（display: inline-flex）を併記しているとSafariでは効きません。

※Safariではposition: stickyにprefix「-webkit-」が必要。

対処法

display: inline-block、display: inline-flexの替わりに

• display: block
• display: flex

を使いましょう。

Safariにおいてposition: stickyが効かない時の対処法でした。

特に、ナビゲーションはdisplay: inline-blockで横並びにしている場合もあるため注意です。

ナビゲーションはdisplay: flexで横並びがおすすめです。