CSS right property

此 CSS 属性指定了水平定位元素的右偏移量，并且不影响非定位元素。它是四种偏移属性中的一种，另外三种是 **left、top** 和 **bottom**。

当同时定义 **left** 和 **right** 属性时，如果容器是从右到左的，则 right 值具有优先权；如果容器是从左到右的，则 left 值具有优先权。

此属性的效果取决于相应元素的定位方式，即 **position** 属性的值。当 **position** 属性值设置为 **static** 时，**right** 属性不起作用。

此属性对 **static（静态）** 值以外的定位元素的效果如下：

• 当元素被绝对定位或固定定位时（即 **position: absolute;** 和 **position: fixed;**），**right** 属性指定了元素右边缘与其包含块（相对定位的祖先元素）右边缘之间的距离。
• 如果元素是相对定位的（即 **position: relative;**），**right** 属性会将元素的右边缘从其正常位置向左/右移动。
• 如果 **position** 设置为 **sticky**（即 **position: sticky;**），则定位上下文是视口。当元素在视口内时，**right** 属性的表现类似于相对定位。当元素在视口外时，**right** 属性的表现则类似于固定定位。

语法

属性值

此属性的值定义如下：

auto：这是默认值。它允许浏览器自动计算 **right** 边缘的位置。

length：此值以 px、cm、pt 等定义 **right** 属性的位置。它允许负值。

percentage：此值以百分比 (%) 定义 **right** 属性的位置。它根据元素包含块的宽度进行计算。它也允许负值。

**初始：**它将属性设置为其默认值。

inherit： 它继承父元素的属性。

示例

在此示例中，有四个绝对定位（即 **position: absolute;**）的 div 元素。我们为它们应用了 **right** 属性。值为 **right: initial;** 和 **right: auto;** 的 div 元素将由于具有默认值和相似的尺寸而发生重叠。

输出

示例

在此示例中，有四个相对定位（即 **position: relative;**）的 div 元素。我们对它们应用了 CSS **right** 属性。在这里，我们对两个 div 元素使用了长度和百分比的负值。

输出