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

Safariでposition: stickyが効かない?display: blockで対処 Web制作

Safariでposition: stickyが効かない。

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

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

position: stickydisplay: inline-blockdisplay: inline-flex)を併記しているとSafariでは効きません。

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

対処法

display: inline-blockdisplay: inline-flexの替わりに

  • display: block
  • display: flex

を使いましょう。

 

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

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

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

コメント

タイトルとURLをコピーしました