sign()
Baseline 2025Newly available
Since June 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The sign()
CSS function contains one calculation, and returns -1
if the numeric value of the argument is negative, +1
if the numeric value of the argument is positive, 0⁺
if the numeric value of the argument is 0⁺, and 0⁻
if the numeric value of the argument is 0⁻.
Note:
While abs()
returns the absolute value of the argument, sign()
returns the sign of the argument.
Syntax
/* property: sign( expression ) */
top: sign(20vh - 100px);
Parameters
The sign(x)
function accepts only one value as its parameter.
x
-
A calculation which resolves to a number.
Return value
A number representing the sign of A
:
- If
x
is positive, returns1
. - If
x
is negative, returns-1
. - If
x
is positive zero, returns0
. - If
x
is negative zero, returns-0
. - Otherwise, returns
NaN
.
Formal syntax
Examples
Background image position
For example, in background-position
positive percentages resolve to a negative length, and vice versa, if the background image is larger than the background area. Thus sign(10%)
might return 1
or -1
, depending on how the percentage is resolved! (Or even 0
, if it's resolved against a zero length.)
div {
background-position: sign(10%);
}
Position direction
Another use case is to control the position
of the element. Either a positive or a negative value.
div {
position: absolute;
top: calc(100px * sign(var(--value)));
}
Specifications
Specification |
---|
CSS Values and Units Module Level 4 # sign-funcs |