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: unset;
<length>
<length>
that represents: <percentage>
<percentage>
of the containing block's width.auto
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
<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 right edge and 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(); |
<length> | <percentage> | auto
<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 meet both. When the position of the element is overspecified, the precende is based on the container's direction: The left
will take precendence 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 | Status | Comment |
---|---|---|
CSS Positioned Layout Module Level 3 The definition of 'right' in that specification. | Working Draft | Adds behavior for sticky positioning. |
CSS Level 2 (Revision 1) The definition of 'right' in that specification. | Recommendation | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
right |
1 | 12 | 1 | 5.5 | 5 | 1 |
Mobile | ||||||
---|---|---|---|---|---|---|
right |
1 | 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–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/right