CSSで無限大の値を取り扱うには、calc()内で数量定数(calc-constant)であるinfinityを使用します。
目次
使用例
使えそうな場面について考えました。
z-indexに使う
最も上位に表示させたい要素に対して、z-index:calc(infinity);と指定します。
また、これまでと同じく以下のような場合は、inifinityを指定しても上位表示されません↓
See the Pen Untitled by ユイト (@mikiprogram) on CodePen.
border-radiusに使う
以下のような錠剤型ボタンを実装するときに、border-radius:calc(infinity * 1px);と指定します↓
See the Pen Untitled by ユイト (@mikiprogram) on CodePen.
ブラウザ対応状況
記事執筆時点(2023/07/12)で、主要なブラウザ全てに対応しています。
参考サイト
あわせて読みたい
MDN Web Docs
– CSS: Cascading Style Sheets | MDN
The CSS data type represents well-defined constants such as e and pi. Rather than require authors to manually type out several digits of these m…
あわせて読みたい
note（ノート）
CSSのcalc()関数内で無限大infinity値が使えるように｜たかもそ／Web Creator.
Chrome 99 と Safari 15 から無限大 infinity 値が使えるようになりました。 使い道 用途としてはこれまで 9999px のように大きな値を指定していた箇所に使えると思います…
