CSS right 属性用来指定被定位元素右侧边缘的位置。right属性定义了被定位元素右侧外边距边界与其包含块元素右侧边界之间的偏移。

right是一个偏移属性。偏移属性用于指定一个被定位元素的精确位置，对于static的元素没有效果。要使用这个CSS属性，必须为元素设置一个值，而不能是默认的static定位方式。

在CSS中，可用的偏移属性有四个，包括top、right、 和 。

对于绝对定位的元素，即 属性设置为absolute的元素，right属性指定元素右侧边距边缘和包含该元素容器的右侧边缘的距离。

对于相对定位的元素，即 属性设置为relative的元素，right属性指定元素的右侧边界离开其正常位置的距离。

对于固定定位或sticky定位的元素，right属性指定元素到视口右侧边缘的距离。

如果元素指定了固定的宽度，并且为该元素设置了一个非auto值的属性，那么，为元素设置的right属性会被属性覆盖。

如果元素没有明确的设置宽度值，并且同时设置了和right属性，此时这两个属性都会生效，元素在水平方向上会被拉伸，左侧边界和右侧边界分别位于指定的和right属性值的地方。

官方语法

right: <length> | <percentage> | auto

参数：

• <length>：使用固定的值指定元素的右侧偏移。长度值允许为负数。
• <percentage>：使用元素的包含块的值来指定右侧偏移值。百分比值允许为负数。
• auto：当right属性设置为auto的时候，分为两种情况：
  • 如果元素是相对定位的，在水平方向上会根据属性的值来定位。如果属性也设置为auto，那么元素在水平方向上不会移动。
  • 如果元素是绝对定位的，在水平方向上会根据属性的值来定位。如果元素的高度设置为auto，那么元素的宽度会随着内容的增加而增长。

right属性的初始值为auto。right属性可以使用inherit属性从它的父元素中继承右侧偏移值。它的父元素不一定是它的定位上下文。

应用范围

right属性可以应用在所有可以被定位的元素上。

示例代码

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

/* <percentages> 值，相对于它的包含容器的宽度 */
right: 10%;

right: auto;

right: inherit;  

在线演示

1、在相对定位的元素上使用right属性：

2、在绝对定位的元素上使用right属性：

3、right值设置为auto的情况：这个demo中，元素的right属性设置为auto，元素的定位方式为绝对定位，此时它会根据left属性来在水平方向上移动元素，这里设置left的值为30像素，所以元素会定位在距离父元素右侧边框30像素的地方。（垂直方向上的偏移通过top和bottom属性来控制）

浏览器支持

所有的现代浏览器都支持right属性。包括Chrome，Firefox，Safari，Opera，Internet Explorer，以及Android和iOS。