2022年1月9日 / 最終更新日時 : 2022年1月9日 info@rishuntrading.co.jp プログラミング Safariの時、z-indexが効かない場合がある。 今回も実際の事例です。 背景を重ねて表示し、cssのz-indexを使い、背景の表示順を指定していたのですが、その際に、Safariで表示した際に、このz-indexが効かない事象に遭遇しました。 根本原因はSafariのバグっぽいのですが、transform: translateZ(1px);を用いて回避する事ができました。 メモしておきます。 z-indexが効かない条件 発生時のHTML文(簡易的に記載) <body class="blog20220109"> <div class="page-header"> <p>疑似要素afterを使い、z-index:-1で画像を背景に使用</p> </div>

