IEでz-indexが効かないときの対処法

先日、IEを使っているユーザーからヒーローヘッダーに検索ボックスを配置したレイアウトで、検索ボックスに入力できないという指摘を受けました。

原因はz-indexが効いていないことだと分かったのですが、その理由が分からずしばらく悩みました。

が、結局はIE特有の問題でした。IEではpositionを指定しないとz-indexが正しく反映されないのです。

最近Grid レイアウトを使うことが多くなり、重ね合わせるレイアウトのときもpositionを使うことが少なくなったので、すっかり忘れていました。

今回の問題は検索ボックスの入っている要素にposition:relativeを指定して解決。

忘れないために覚え書きとして記事にしておきます。