right

Summary

摘要

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.

right属性对非定位元素没有影响。

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).

当right属性和left属性都被指定的时候，元素的位置过分受限。当容器内容是从左向右排列时，left属性优先级更高（right属性被强制设置成left属性计算值的负值）；当容器内容是从右向左排列时，right属性优先级更高（left属性被强制设置成right属性计算值的负值）。

Syntax

语法

/* <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;

Values

取值

<length>

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.
• 对于相对定位元素，表示它在非定位时的正常流中相对自身向右的偏移量。

<percentage>

Is a <percentage> of the containing block's width, used as described in the summary.
百分比是相对于包含块的宽度，用法详见summary.

auto

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，则都没有偏移。

inherit

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

Examples

示例

#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>

Specifications

Browser compatibility

浏览器兼容性