Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

CSS right Property

The right property specifies the horizontal position of a positioned element.

Positioned elements have a position, such as absolute, sticky, etc.

The effect of the right setting depends on the position value.

Example

#

The inner element is positioned 50px from the right side of the container.

<style>
  .relative {
    position: relative;
    width: 400px;
    height: 200px;
    background-color: paleturquoise;
  }

  .absolute {
    position: absolute;
    top: 20px;
    right: 50px;
    width: 200px;
    height: 90px;
    background-color: teal;
  }
</style>

<div class="relative">
  <div class="absolute">
  </div>
</div>

Using right

The effect of the right setting depends on the position value:

  • fixed or absolute - the right position is measured from its containing element.
  • relative - the right is measured from its normal right position.
  • sticky - the right specifies the sticky right position relative to the viewport.
  • static - the right value has no effect.

The right property has no effect on non-positioned elements.

Syntax

right: auto | length | initial | inherit;

Values

#

Value Description
auto Default. The browser calculates the right position.
length Sets the right position with any valid CSS length value. Negative values are allowed.
% Sets the right position in % of the containing element. Negative values are allowed
initial Sets the value to its default value.
inherit Inherits the value from its parent.

More Examples

Click the buttons to see the different right values.

<style>
  .right-relative {
    position: relative;
    width: 350px;
    height: 200px;
    background-color: firebrick;
  }

  .right-absolute {
    position: absolute;
    top: 20px;
    right: -20px;
    width: 250px;
    height: 90px;
    background-color: orangered;
    transition: right 1s ease .2s;
  }
</style>

<div class="right-relative">
  <div class="right-absolute"></div>
</div> 

Browser support

This table shows when right support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
5.5 Jul 2000
Opera
5.0 Dec 2000
Safari
1.0 Jun 2003

You may also like

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

Guides