right

CSS の right プロパティは、位置指定要素 (positioned elements) の水平位置の決定に関与します。位置指定されていない要素には効果はありません。

right の効果は、要素がどの様に配置されているか (つまり、 position プロパティの値) によって変わります。

  • position が absolute 又は fixed に設定されている場合、 right プロパティは要素の右辺と包含ブロックの右辺との間の距離を指定します。
  • position が relative に設定されている場合、 right プロパティは要素の右辺が通常位置から左方向へ移動する量を指定します。
  • position が sticky に設定されている場合、 right プロパティは要素がビューポート内にある場合は position が relative であるかのように、外の場合は position が fixed の場合と同様に動作します。
  • position が static に設定されている場合、 right プロパティは効果がありません。

left と right の両方が定義された場合、要素の位置は過剰指定になります。内包ブロックが左書きの場合 (つまり、 right の計算値が -left に設定されていた場合)、 left の値が優先されます。内包ブロックが右書きの場合 (つまり、 left の計算値が -right に設定されていた場合)、 right の値が優先されます。

構文

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

/* 内包ブロックの幅に対する <percentage> */
right: 10%;

/* キーワード値 */
right: auto;

/* グローバル値 */
right: inherit;
right: initial;
right: unset;

値

<length>
負、null、または正の <length> で、以下のものを表します。
  • 絶対位置指定要素の場合は、包含ブロックの右辺までの距離。
  • 相対位置指定要素の場合は、通常の位置からの左方向への移動量。
<percentage>
包含ブロックの幅に対する <percentage> です。
auto
以下のように指定します。
  • 絶対位置指定要素では、要素の位置は left プロパティに基づいて決まり、 width: auto は内容物の幅に基づいて決まります。また、 left も 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>

仕様書

仕様書 状態 備考
CSS Transitions
right の定義		 草案 right をアニメーション可能として定義
CSS Positioned Layout Module Level 3
right の定義		 草案 sticky の位置の動作を追加
CSS Level 2 (Revision 1)
right の定義		 勧告 初回定義
初期値auto
適用対象配置された要素
継承なし
パーセンテージ包含ブロックの幅
計算値長さで指定されると相当する絶対的な長さ、パーセンテージとして指定されると指定値、それ以外では auto
アニメーションの種類length または percentage, calc();

ブラウザーの対応

BCD tables only load in the browser

関連情報