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.
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>
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.
right: auto | length | initial | inherit;
| 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. |
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>
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 |
