MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

这篇翻译不完整。请帮忙从英语翻译这篇文章

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属性计算值的负值)。

初始值auto
适用元素positioned elements
是否是继承属性
Percentagesrefer to the width of the containing block
适用媒体visual
计算值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

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

Specification Status Comment
CSS Transitions
right
Working Draft Defines right as animatable.
CSS Level 2 (Revision 1)
right
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,