right 右侧偏移属性

最后更新：2026-09-13

right right 右侧偏移属性

right 属性用于定义定位元素从其包含块右侧边缘向左的偏移量。它仅对非 static 的定位元素生效，常与 absolute、fixed 等定位方式配合，实现从右侧进行定位的效果。

分类
初始值	auto
继承	否
适用于
可动画
CSS 版本	CSS2
状态	标准

📝 语法

right: auto | <length> | <percentage>;

⚙️ 取值

值	类型	描述
`auto`	关键字	无偏移
`<length> \| <percentage>`	类型	相对包含块右边缘偏移

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
right	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

注意： right 仅对非 static 的定位元素生效，对 position: static 的元素无效。

提示： 百分比值相对于包含块的宽度计算。同时设置 left 和 right 可以拉伸元素的宽度以填满两者之间的空间。

❓ 常见问题

Q同时设置 left 和 right 会怎样？

Aabsolute/fixed 且不设 width 时，元素宽度被拉伸，填满 left 与 right 之间的区域，形成自适应宽度布局，如 .bar { position:absolute; left:0; right:0; } 占满水平方向。若设置了 width，LTR 下 left 生效、right 被忽略。

Qright 和 left 哪个优先级更高？

A取决于书写模式：LTR（从左到右，如中文、英文）下 left 优先，同时设置时 right 被忽略；RTL（从右到左，如阿拉伯语）下 right 优先。此外，若不设置 width，两者会一起拉伸元素宽度。利用此规则可以做到跟随书写方向的布局，但要注意这是方向敏感的行为。

Q为什么 right 不生效？

A常见原因：1）元素 position 为 static，right 只对定位元素生效；2）设了 width 且同时设 left，LTR 下 left 优先导致 right 无效；3）参考对象理解错——absolute 相对定位祖先右边缘，fixed 相对视口右边缘。

Q如何让元素固定在容器右侧？

A给父容器 position:relative，子元素 position:absolute; right:0（可配合 top/bottom 定位垂直位置），子元素即贴住父容器右侧。若需固定视口右侧，直接用 position:fixed; right:20px; top:20px 即可，常见于返回顶部按钮、在线客服浮窗等。