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	Status	Comment
CSS Values and Units Module Level 4 The definition of 'sign()' in that specification.	Editor's Draft	Initial definition

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.