right#

#Introduction

The right CSS property participates in specifying the horizontal position of a positioned element. For more information, please refer to property position.

The effect of right depends on how the element is positioned (i.e., the value of the position property):

• When position is set to absolute or fixed, the right property specifies the distance between the element's outer margin of right edge and the inner border of the right edge of its containing block.

• When position is set to relative, the right property specifies the distance the element's right edge is moved to the left from its normal position.

When both left and right are defined, and width constraints don't prevent it, the element will stretch to satisfy both. If the element cannot stretch to satisfy both, the position of the element is overspecified. When this is the case, the left value has precedence when the container is left-to-right; the right value has precedence when the container is right-to-left.

#Examples

css-apisrc/right/App.tsx

Preview

#Syntax

/* <length> values */
right: 3px;
right: 2rpx;
right: 2.4em;
right: 3rem;

right: 10%;

/* Keyword value */
right: auto;

/* calc */
right: calc(1px + 1px);

#Values

#auto

Default value.

#<length>

A negative, null, or positive <length> that represents:

• for absolutely positioned elements, the distance to the right edge of the containing block.

• for relatively positioned elements, the distance that the element is moved to the left of its normal position.

#<percentage>

A <percentage> of the containing block's width.

#Formal definition

#Formal syntax

right =
  auto                 |
  <length-percentage>  |

<length-percentage> =
  <length>      |
  <percentage>

#Compatibility