MDN wants to learn about developers like you:




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

For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the right margin edge of the element and the right edge of its containing block.

对于绝对定位元素(position属性为absolute 或者fixed),它表示元素右外边距边缘到包含块右边缘之间的距离。

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


When both the right CSS property and the left CSS property are defined, the position of the element is overspecified. In that case, the left value has precedence when the container is left-to-right (that is that the right computed value is set to -left), and the right value has precedence when the container is right-to-left (that is that the left computed value is set to -right).


适用元素positioned elements
Percentagesrefer to the width of the containing block
计算值if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
是否适用于 CSS 动画yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
正规顺序the unique non-ambiguous order defined by the formal grammar



/* <length> values */
right: 3px;
right: 2.4em;

/* <percentages> of the width of the containing block */
right: 10%;

/* Keyword value */
right: auto;

/* Global values */
right: inherit;
right: initial;
right: unset;



Is a negative, null or positive <length> that represents:
  • for absolutely positioned elements, the distance to the right edge of the containing block;
  • 对于绝对定位元素,表示到包含块右边界的距离;
  • for relatively positioned elements, the offset that the element is moved right from its position in the normal flow if it wasn't positioned.
  • 对于相对定位元素,表示它在非定位时的正常流中相对自身向右的偏移量。
Is a <percentage> of the containing block's width, used as described in the summary.
Is a keyword that represents:
  • for absolutely positioned elements, the position the element based on the left property and treat width: auto as a width based on the content.
  • 对于绝对定位元素,元素位置根据left 属性和width宽度计算,宽度是auto时要根据内容计算。
  • for relatively positioned elements, the right offset the element from its original position based on the left property, or if left is also auto, do not offset it at all.
  • 对于相对定位元素,根据元素的原始位置和left 属性计算右偏移值,如果left属性也是auto,则都没有偏移。
Is a keyword indicating that the value is the same than the computed value from its parent element (which may not be its containing block). This computed value is then handled like it was a <length>, <percentage> or the auto keyword.
是个关键字,表示值和父元素(可能不是包含块)的计算值一样,计算值像<length>, <percentage> 或者auto关键字哪样处理。

Formal syntax

<length> | <percentage> | auto



#example_3 {
  width: 100px;
  height: 100px;
  background-color: #FFC7E4;
  position: relative;
  top: 20px;
  left: 20px;

#example_4 {
  width: 100px;
  height: 100px;
  background-color: #FFD7C2;
  position: absolute;
  bottom: 10px;
  right: 20px;
<div id="example_3">Example 3</div>
<div id="example_4">Example 4</div>


Specification Status Comment
CSS Transitions
Working Draft Defines right as animatable.
CSS Level 2 (Revision 1)
Recommendation Initial definition

Browser compatibility


Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 5.5 5.0 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 6.0 6.0 1.0


 此页面的贡献者: Sebastianz, omega4github
 最后编辑者: Sebastianz,