右侧

<length>

表示负、空或正 <length> 的值，

• 对于绝对定位元素，表示元素到包含块右边缘的距离。
• 对于锚点定位元素，anchor() 函数解析为相对于关联锚点元素左或右边缘位置的 <length> 值。
• 对于相对定位元素，表示元素相对于其正常位置向左移动的距离。

<percentage>

包含块宽度的 <percentage>。

auto

指定

• 对于绝对定位元素，元素的位置基于 left 属性，而 width: auto 被视为基于内容的宽度；或者如果 left 也是 auto，则元素将被放置在如果它是一个静态元素应该被水平放置的位置。
• 对于相对定位元素，元素与其正常位置之间的距离基于 left 属性；或者如果 left 也是 auto，则元素根本不会水平移动。

inherit

指定该值为其父元素（可能不是其包含块）的计算值。此计算值然后被处理，就像它是 <length>、<percentage> 或 auto 关键字一样。

right 的效果取决于元素的定位方式（即 position 属性的值）

• 当 position 设置为 absolute 或 fixed 时，right 属性指定元素外边距右边缘与其包含块右边缘内边框之间的距离。如果定位元素具有关联的锚点元素，并且属性值包含一个 anchor() 函数，right 相对于指定的 <anchor-side> 边缘定位定位元素的右边缘。right 属性与 left、right、start、end、self-start、self-end、center 和 <percentage> 值兼容。
• 当 position 设置为 relative 时，right 属性指定元素右边缘从其正常位置向左移动的距离。
• 当 position 设置为 sticky 时，right 属性用于计算粘性约束矩形。
• 当position设置为static时，right属性无效。

当同时定义了left和right时，如果其他属性没有阻止它这样做，元素将拉伸以满足两者。如果元素无法拉伸以满足两者 - 例如，如果声明了width - 元素的位置将过度约束。在这种情况下，当容器为从左到右时，left值优先；当容器为从右到左时，right值优先。

right = 
  auto                 |
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>  

HTML

<div id="relative">Relatively positioned</div>
<div id="absolute">Absolutely positioned</div>

CSS

#relative {
  width: 100px;
  height: 100px;
  background-color: #ffc7e4;
  position: relative;
  top: 20px;
  left: 20px;
}

#absolute {
  width: 100px;
  height: 100px;
  background-color: #ffd7c2;
  position: absolute;
  bottom: 10px;
  right: 20px;
}

结果

当同时声明left和right时，元素将拉伸以满足两者，除非其他约束阻止它这样做。如果元素不会拉伸或收缩以满足两者。当元素的位置过度指定时，优先级基于容器的方向：如果容器的方向为从左到右，则left优先。如果容器的方向为从右到左，则right优先。

HTML

<div id="parent">
  Parent
  <div id="noWidth">No width</div>
  <div id="width">width: 100px</div>
</div>

CSS

div {
  outline: 1px solid #cccccc;
}
#parent {
  width: 200px;
  height: 200px;
  background-color: #ffc7e4;
  position: relative;
}
/* declare both a left and a right */
#width,
#noWidth {
  background-color: #c2ffd7;
  position: absolute;
  left: 0;
  right: 0;
}
/* declare a width */
#width {
  width: 100px;
  top: 60px;
}

结果

• inset，所有相关属性的简写：top，bottom，和left
• 映射的逻辑属性：inset-block-start，inset-block-end，inset-inline-start，和inset-inline-end以及简写inset-block和inset-inline
• position