azukiazusa

CSS で絶対に最前面に表示したい要素には z-index:calc(infinity) を指定する

Jan 25, 2024

いつの時代にも z-index の管理には頭を悩ませます。z-index の値には 1 以外の値を許可しないなどの管理方法がありますが、外部のライブラリを使用してる場合に勝つことができません。

そこで　z-index の値に calc(infinity) を指定すると、絶対に最前面に表示させることができます。

azukiazusa

infinity は calc() の中で使用できる特殊な値です。名前の通り最も大きな値を表します。

そのため、どんなに大きな z-index の値を指定されても、calc(infinity) が最も大きな値になるため、最前面に表示されるわけですね。

azukiazusa

ただし z-index のスタッキングコンテキストの仕組みには当然従うため、calc(infinity) を指定したとしても、必ずしも最前面に表示されるとは限りません。