いつの時代にも z-index の管理には頭を悩ませます。z-index の値には 1 以外の値を許可しないなどの管理方法がありますが、外部のライブラリを使用してる場合に勝つことができません。 そこで z-index の値に calc(infinity) を指定すると、絶対に最前面に表示させることができます。 infinity は calc() の中で使用できる特殊な値です。名前の通り最も大きな値を表します。 そのため、どんなに大きな z-index の値を指定されても、calc(infinity) が最も大きな値になるため、最前面に表示されるわけですね。
![CSS で絶対に最前面に表示したい要素には z-index:calc(infinity) を指定する](https://cdn-ak-scissors.b.st-hatena.com/image/square/a203c3b633c1f013a81be154381609f2edf67722/height=288;version=1;width=512/https%3A%2F%2Fazukiazusa.dev%2Fblog%2Fshorts%2Fogp%2F%25E3%2581%2584%25E3%2581%25A4%25E3%2581%25AE%25E6%2599%2582%25E4%25BB%25A3%25E3%2581%25AB%25E3%2582%2582%2520z-index%2520%25E3%2581%25AE%25E7%25AE%25A1%25E7%2590%2586%25E3%2581%25AB%25E3%2581%25AF%25E9%25A0%25AD%25E3%2582%2592%25E6%2582%25A9%25E3%2581%25BE%25E3%2581%259B%25E3%2581%25BE%25E3%2581%2599%25E3%2580%2582z-index%2520%25E3%2581%25AE%25E5%2580%25A4%25E3%2581%25AB%25E3%2581%25AF%25201%2520%25E4%25BB%25A5%25E5%25A4%2596%25E3%2581%25AE%25E5%2580%25A4%25E3%2582%2592%25E8%25A8%25B1%25E5%258F%25AF%25E3%2581%2597%25E3%2581%25AA%25E3%2581%2584%25E3%2581%25AA%25E3%2581%25A9%25E3%2581%25AE%25E7%25AE%25A1%25E7%2590%2586%25E6%2596%25B9%25E6%25B3%2595%25E3%2581%258C%25E3%2581%2582%25E3%2582%258A%25E3%2581%25BE%25E3%2581%2599%25E3%2581%258C%25E3%2580%2581%25E5%25A4%2596%25E9%2583%25A8%25E3%2581%25AE%25E3%2583%25A9%25E3%2582%25A4%25E3%2583%2596%25E3%2583%25A9%25E3%2583%25AA%25E3%2582%2592%25E4%25BD%25BF%25E7%2594%25A8%25E3%2581%2597%25E3%2581%25A6%25E3%2582%258B%25E5%25A0%25B4%25E5%2590%2588%25E3%2581%25AB%25E5%258B%259D%25E3%2581%25A4%25E3%2581%2593%25E3%2581%25A8%25E3%2581%258C%25E3%2581%25A7%25E3%2581%258D%25E3%2581%25BE%25E3%2581%259B%25E3%2582%2593%25E3%2580%2582%250A%250A%25E3%2581%259D%25E3%2581%2593%25E3%2581%25A7%25E3%2580%2580z-index%2520%25E3%2581%25AE%25E5%2580%25A4%25E3%2581%25AB%2520%2560calc%28infinity%29%2560%2520%25E3%2582%2592%25E6%258C%2587%25E5%25AE%259A%25E3%2581%2599%25E3%2582%258B%25E3%2581%25A8%25E3%2580%2581%25E7%25B5%25B6%25E5%25AF%25BE%25E3%2581%25AB%25E6%259C%2580%25E5%2589%258D%25E9%259D%25A2%25E3%2581%25AB%25E8%25A1%25A8%25E7%25A4%25BA%25E3%2581%2595%25E3%2581%259B%25E3%2582%258B%25E3%2581%2593%25E3%2581%25A8%25E3%2581%258C%25E3%2581%25A7%25E3%2581%258D%25E3%2581%25BE%25E3%2581%2599%25E3%2580%2582%250A.png)