The right
CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.
The right
CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.
/* <length> values */ right: 3px; right: 2.4em; /* <percentage>s of the width of the containing block */ right: 10%; /* Keyword value */ right: auto; /* Global values */ right: inherit; right: initial; right: revert; right: revert-layer; right: unset;
<length>
A negative, null, or positive <length>
that represents:
<percentage>
A <percentage>
of the containing block's width.
auto
Specifies that:
left
property, while width: auto
is treated as a width based on the content; or if left
is also auto
, the element is positioned where it should horizontally be positioned if it were a static element.left
property; or if left
is also auto
, the element is not moved horizontally at all.inherit
Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a <length>
, <percentage>
, or the auto
keyword.
The effect of right
depends on how the element is positioned (i.e., the value of the position
property):
position
is set to absolute
or fixed
, the right
property specifies the distance between the element's outer margin of right edge and the inner border of the right edge of its containing block.position
is set to relative
, the right
property specifies the distance the element's right edge is moved to the left from its normal position.position
is set to sticky
, the right
property is used to compute the sticky-constraint rectangle.position
is set to static
, the right
property has no effect.When both left
and right
are defined, if not prevented from doing so by other properties, the element will stretch to satisfy both. If the element cannot stretch to satisfy both — for example, if a width
is declared — the position of the element is over-constrained. 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.
Initial value | auto |
---|---|
Applies to | positioned elements |
Inherited | no |
Percentages | refer to the width of the containing block |
Computed value | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
|
Animation type | a length, percentage or calc(); |
right =
auto |
<length-percentage>
<length-percentage> =
<length> |
<percentage>
<div id="relative">Relatively positioned</div> <div id="absolute">Absolutely positioned</div>
#relative { width: 100px; height: 100px; background-color: #ffc7e4; position: relative; top: 20px; left: 20px; } #absolute { width: 100px; height: 100px; background-color: #ffd7c2; position: absolute; bottom: 10px; right: 20px; }
When both left
and right
are declared, the element will stretch to meet both, unless other constraints prevent it from doing so. If the element will not stretch or shrink to meet both. When the position of the element is overspecified, the precedence is based on the container's direction: The left
will take precedence if the container's direction is left-to-right. The right
will take precedence if the container's direction is right-to-left.
<div id="parent"> Parent <div id="noWidth">No width</div> <div id="width">width: 100px</div> </div>
div { outline: 1px solid #cccccc; } #parent { width: 200px; height: 200px; background-color: #ffc7e4; position: relative; } /* declare both a left and a right */ #width, #noWidth { background-color: #c2ffd7; position: absolute; left: 0; right: 0; } /* declare a width */ #width { width: 100px; top: 60px; }
Specification |
---|
CSS Positioned Layout Module Level 3 # insets |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
right |
1 | 12 | 1 | 5.5 | 5 | 1 | 4.4 | 18 | 4 | 14 | 1 | 1.0 |
inset
, the shorthand for all related properties: top
, bottom
, left
, and right
inset-block-start
, inset-block-end
, inset-inline-start
, and inset-inline-end
and the shorthands inset-block
and inset-inline
position
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/right