right

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

この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

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 キーワードと同様に扱われます。

形式文法

<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>

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• position, left, top, bottom