CSS infinity calc constant

CSS has an infinity constant that can only be used inside of a calc() statement. It is supported by modern browsers. For example, to set the z-index to the hightest possible value you could do:

.on-top {
z-index: calc(infinity);
}

There is a negative infinity too: -infinity.

infinity is not limited to z-index. It can be used whenever you need the highest possible number (it´s not infinity really, just a high number). E.g.:

.wide {
width: calc(infinity * 1px);
}

Will Boyd explores the topic much further in his article Playing with Infinity in CSS.

Comments