sign()
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( --value );
The sign()
function takes only one expression as its argument.
Formal syntax
No syntax available: No value found in the database.
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 usecase 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 5 # sign-funcs |
Browser compatibility
No compatibility data found for css.types.sign
.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.