CSS属性参考 | right

07-26 次

标签 css教程 css属性定位

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

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

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

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

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

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

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

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

官方语法

right: <length> | <percentage> | auto

参数：

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

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

应用范围

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

示例代码

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

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

right: auto;

right: inherit;

在线演示

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

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

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