right

Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published Jul 14, 2021Updated Mar 10, 2023
Contribute to Docs

Specifies the distance of an element from the right of its current location if the element has position: relative declared or from the right of its nearest ancestor when the ancestor has position: relative and the element has position: absolute declared.

Syntax

right: <value>;

where <value> can be one of the following:

  • Length value: 20px
  • Percentage value: 5%
  • Keyword value: auto, inherit

Note: If none of the ancestors have position: relative declared, the absolute positioned element will traverse the DOM until it reaches the

Example 1

Set the position of .box element 40px off the right edge of the nearest relative position ancestor or from the document if none exist.

.box {
height: 100px;
width: 100px;
background-color: blue;
position: absolute;
top: 40px;
}

Example 2

Set the position of .box element 40px from the elements right edge.

.box {
height: 100px;
width: 100px;
background-color: blue;
position: relative;
top: 40px;
}

All contributors

Looking to contribute?

Learn CSS on Codecademy