CSS right 属性

在CSS中，right 属性用于设置元素相对于其包含块的右侧位置。它可以与 position 属性一起使用，以确定元素的定位方式。

语法

selector {
  right: value;
}

• value：可以是一个长度值（如 px、em、% 等）、一个百分比值、一个负值或 auto。

值

• 长度值：指定元素右侧边缘距离包含块右侧边缘的距离。

  .box {
    position: absolute;
    right: 20px;
  }

• 百分比值：指定元素右侧边缘距离包含块右侧边缘的百分比。

  .box {
    position: absolute;
    right: 50%;
  }

• 负值：允许元素超出包含块右侧边缘，向左移动。

  .box {
    position: absolute;
    right: -10px;
  }

• auto：默认值，元素在包含块中水平居中。

  .box {
    position: absolute;
    right: auto;
  }

示例

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Right Property Example</title>
<style>
  .container {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    position: relative;
  }
  .box {
    width: 50px;
    height: 50px;
    background-color: #f00;
    position: absolute;
    right: 20px;
  }
</style>
</head>
<body>
<div class="container">
  <div class="box"></div>
</div>
</body>
</html>

在上面的示例中，我们创建了一个容器元素 .container，并在其中放置了一个红色盒子 .box。通过设置 .box 的 right: 20px;，使其距离容器右侧边缘20像素的位置。

这就是 right 属性的基本用法和示例，通过灵活运用这个属性，我们可以实现各种元素的定位效果。