右边距 | right
right样式属性定义了定位元素的右外边距边界与其包含块右边界之间的偏移，非定位元素设置此属性无效。
/* <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;right的效果取决于元素的position属性：
- 当
position设置为absolute或fixed时，right属性指定了定位元素右外边距边界与其包含块右边界之间的偏移。
- 当
position设置为relative时，right属性指定了元素的右边界离开其正常位置的偏移。
- 当
position设置为sticky时，如果元素在viewport里面，right属性的效果和position为relative等同；如果元素在viewport外面，right属性的效果和position为fixed等同。
- 当
position设置为static时，right属性无效。
当left和right同时指定时，元素的位置会被重复指定。当容器是从左到右时，left的值会被优先设定；当容器是从右到左时，right的值会被优先设定。
初始值 | auto |
|---|---|
适用元素 | positioned elements |
no | |
Percentages | refer 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 type | a length, percentage or calc(); |
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
值
- 对于绝对定位的元素，元素右外边距边界与其包含块右边界之间的偏移。
- 对于相对定位定位的元素，元素的右边界离开其正常位置的偏移。
<percentage>代表元素包含块的宽度的百分比 <percentage>。auto这个关键字表示:
- 对于绝对定位元素，元素将忽略此属性已
left属性为准，如果此时设置height: auto，将基于内容需要的高度设置宽度。
- 对于相对定位元素，元素相对正常位置的偏移量将基于
left属性，如果left也为auto的话，元素将不会有偏移。
inherit这个关键字表示该值与其父元素 (可能不是它的包含块) 的计算值相同。对这个计算值的处理将和它原本为<length>，<percentage>或auto一样。
形式化语法
<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 TransitionsThe definition of 'right' in that specification. | Working Draft | Defines right as animatable. |
CSS Level 2 (Revision 1)The definition of 'right' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 5.5 | 5.0 | 1.0 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1) | 6.0 | 6.0 | 1.0 |
另见
position，left，top，bottom
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
