right property affects the horizontal position of a positioned element. It has no effect on non-positioned elements.
The effect of
right depends on how the element is positioned (i.e., the value of the position property):
rightproperty specifies the distance between the element's right edge and the right edge of its containing block.
rightproperty specifies the distance the element's right edge is moved to the left from its normal position.
rightproperty behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
rightproperty has no effect.
When both left and right are defined, 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.
|Applies to||positioned elements|
|Computed value||as specified|
|Animatable||yes See animatable properties. Demo|
The following example shows how to use
The numbers in the table specify the first browser version that fully supports the
The following table describes the values of
|auto||The browser calculates the right edge position (This is default)|
|length||Sets the right edge position in length. Negative values are allowed See length units|
|initial||Sets this property to its default value|
|inherit||Inherits this property from its parent element|
CSS Positioned Element tutorial
CSS position property
CSS top property
CSS bottom property
CSS left property