IE11でz-indexの指定が反映されていなかったときの対処法

CSSとjavascriptでドロワーメニューをつくっていたとき、ボタンやメニュー以外の部分のクリックでメニューを閉じるよう設定していたのですが、IE11だとz-indexが効いておらずにリンクが押せる状態となっていました。

原因を調べてみると、positionを設定していなかったためであることが判明。
以前まではposition: fixedでボックスをつくっていたのですが、CSS Gridでレイアウトするようになったため、positionを外してしまっていたのが原因でした。
なので、ボックスの部分にposition: relativeを指定してあげると、うまく動作するようになりました。

ChromeやFirefoxではうまくいっていたため、わざわざIEのために設定するのは面倒くさい!と感じてしまうのですが、またひとつ勉強となりました。