W3docs
en
Log in

CSS right Property

How to use the right CSS property to set the right position of an element. See the property values in use and practice.

The right property specifies part of the position of positioned elements.

For absolutely or fixed positioned elements, the right property specifies the distance between the right edge of the element and the right edge of its containing block.

Info

If position is set to static, the right property has no effect.

The effect of right depends on the element's positioning (see position property):

  • If position is set to absolute or fixed, the right property specifies the distance between the element's right edge and the right edge of its containing block.
  • If position is set to relative, the right property specifies the distance the element's right edge is moved to the right from its normal position.
  • If position is set to sticky, the right property specifies the distance from the right edge of the viewport when the element becomes sticky.
  • If position is set to static, the property has no effect.
Initial Valueauto
Applies toPositioned elements.
InheritedNo.
AnimatableYes. Position of the element is animatable.
VersionCSS2
DOM SyntaxObject.style.right = "50px";

Syntax

Syntax of CSS right Property

right: auto | length | initial | inherit;

Example with px value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        right: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Right property example</h2>
    <img src="/build/images/w3docs-logo-black.png" alt="W3docs logo" width="146" height="41" />
  </body>
</html>
Try it Yourself »

Result

CSS right Property

Example with % value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 150px;
        width: 100%;
        background-color: #ccc;
        color: #ffffff;
      }
      img {
        position: absolute;
        right: 30%;
        top: 120px;
      }
    </style>
  </head>
  <body>
    <h2>Right property example</h2>
    <img src="/build/images/w3docs-logo-black.png" alt="W3docs logo" width="146" height="41" />
    <div>This is some div element.</div>
  </body>
</html>
Try it Yourself »

Example with initial value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        position: relative;
        max-width: 300px;
        line-height: 20px;
      }
      p {
        position: absolute;
        right: initial;
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <h2>Right property example</h2>
    <div>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs
      <p>Some text</p>
    </div>
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
autoSets the right edge position. It is the default value of this property.Play it »
lengthSets the right edge position with px, em, rem, etc. Negative values are allowed.Play it »
%Sets the right edge position with % of containing element. Negative values are allowed.Play it »
initialSets the property to its default value (auto), which lets the browser calculate the position automatically.Play it »
inheritInherits the property from the parent element.

Practice

Practice

What is the role of the 'right' property in CSS?