この翻訳は不完全です。英語から この記事を翻訳 してください。

概要

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

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

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

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

初期値auto
適用対象配置された要素
継承不可
相対値の基準包含ブロックの幅
メディアvisual
計算値長さで指定されると相当する絶対的な長さ、パーセンテージとして指定されると指定値、それ以外では auto
アニメーションの可否可。 。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちますの値として補完しますlength または percentage, calc();
正規順序形式文法で定義される一意のあいまいでない順序

構文

形式文法: <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 に基づく元々の位置からの移動量です。leftauto の場合にはまったく移動しません。
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 Level 2 (Revision 1)
right の定義
勧告  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) 5.5 5.0 1.0
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 1.0 1.0 (1) 6.0 6.0 1.0

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: Simplexible, Prinz_Rana, SphinxKnight, fscholz, teoli, ethertank, sosleepy
 最終更新者: Simplexible,