right

概要

CSS の right プロパティは、位置指定された要素の位置の一部を定義します。

絶対位置指定要素（ position が absolute または fixed である要素）では、包含ブロックの右辺と、要素のマージン境界の右辺との距離を定義します。

right プロパティは、位置指定されていない要素に対しては効果を持ちません。

right と left の両方のプロパティが指定されると、要素位置の 過剰指定 の状態です。このときは、コンテナが左から右に進むなら left 値が優先され（right の計算値は -left にセットされます）、コンテナが右から左に進むなら right 値が優先されます（left の計算値は -right にセットされます）。

構文

形式文法: <length> | <percentage> | auto

right: 3px         /* <length> 値 */
right: 2.4em

right: 10%         /* 包含ブロックの幅に対する <percentages> */

right: auto

right: inherit

値

<length>

次の意味を持つ負、null、または正の <length>:

• 絶対位置指定要素 では、包含ブロックの右辺までの距離
• 相対位置指定要素 では、位置指定されていない場合に通常フローで置かれる位置からの右方向への移動量。

<percentage>

包含ブロックの幅に対する <percentage> で、概要に書かれたような使い方をします。

auto

次の意味を持つキーワードです:

• 絶対位置指定要素では left に基づく位置。width: auto はコンテンツに基づく幅とみなされます。
• 相対位置指定要素では left に基づく元々の位置からの移動量です。left も auto の場合にはまったく移動しません。

inherit

親要素（包含ブロックではないかもしれません）からの計算値と同じ値であることを示すキーワードです。この計算値は、<length>、<percentage>、または auto キーワードであるかのように扱われます。

例

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

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

<div id="example_3">Example 3</div>
<div id="example_4">Example 4</div>

仕様書

ブラウザ実装状況