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

right样式属性定义了定位元素的右外边距边界与其包含块右边界之间的偏移,非定位元素设置此属性无效。

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

right的效果取决于元素的position属性:

  • position设置为absolutefixed时,right属性指定了定位元素右外边距边界与其包含块右边界之间的偏移。
  • position设置为relative时,right属性指定了元素的右边界离开其正常位置的偏移。
  • position设置为sticky时,如果元素在viewport里面,right属性的效果和position为relative等同;如果元素在viewport外面,right属性的效果和position为fixed等同。
  • position设置为static时,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
Animation typea length, percentage or calc();
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

取值

<length>
可以是负的,正的 或者 null <length> 表示:
  • 对于绝对定位的元素,元素右外边距边界与其包含块右边界之间的偏移。
  • 对于相对定位定位的元素,元素的右边界离开其正常位置的偏移。
<percentage>
代表元素包含块的宽度的百分比 <percentage>
auto
这个关键字表示:
  • 对于绝对定位元素,元素将忽略此属性而以left属性为准,如果此时设置width: auto,将基于内容需要的宽度设置宽度;如果left也为auto的话,元素的水平位置就是它假如作为静态(即static)元素时该在的位置。
  • 对于相对定位元素,元素相对正常位置的偏移量将基于left属性;如果left也为 auto的话,元素将不会有偏移。
inherit
这个关键字表示该值与其父元素 (可能不是它的包含块) 的计算值相同。对这个计算值的处理将和它原本为 <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
right
Working Draft Defines rightas animatable.
CSS Positioned Layout Module Level 3
right
Working Draft Adds behavior for sticky positioning.
CSS Level 2 (Revision 1)
right
Recommendation Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 5.5Opera Full support 5Safari Full support 1WebView Android Full support 1Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support Yes

Legend

Full support  
Full support

 

文档标签和贡献者

此页面的贡献者: Zhang-Junzhi, codevvvv9, xupea, Sebastianz, omega4github
最后编辑者: Zhang-Junzhi,