CSS の right
プロパティは、位置指定要素の水平位置の決定に関与します。位置指定されていない要素には効果はありません。
この対話型サンプルのソースファイルは 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
- 以下のように指定します。
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>
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
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
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。