right

試してみましょう

right: 0;

right: 4em;

right: 10%;

right: 20px;

<section id="default-example">
  <div class="example-container">
    <div id="example-element">これは絶対位置指定されています。</div>
    <p>
      まるで地球の表面から水が引き始めたかのように、通りは泥だらけで、ホルボーン通りを象のようなトカゲのようによちよち歩く、体長 12 メートルほどのメガロサウルスに出会っても不思議ではないでしょう。
    </p>
  </div>
</section>

.example-container {
  border: 0.75em solid;
  padding: 0.75em;
  text-align: left;
  position: relative;
  width: 100%;
  min-height: 200px;
}

#example-element {
  background-color: #264653;
  border: 4px solid #ffb500;
  color: white;
  position: absolute;
  width: 140px;
  height: 60px;
}

構文

/* <length> 値 */
right: 3px;
right: 2.4em;
right: anchor(--my-anchor 50%);
right: anchor-size(--my-anchor height, 65px);

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

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

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

値

<length>

負、null、または正の <length> で、以下のものを表します。

• 絶対位置指定要素の場合は、包含ブロックの右端までの距離を表します。
• アンカー位置指定要素の場合は、anchor() 関数は、関連付けられたアンカー要素の左端または右端の位置を基準とした相対的な <length> 値に解決されます（詳細はインセットプロパティで anchor() 関数値を使用を参照）。また、anchor-size() 関数は、関連するアンカー要素の幅または高さに相対的な <length> 値に解決します（アンカーサイズに基づく要素の位置の設定 を参照）。
• 相対位置指定要素の場合は、通常の位置からの左方向への移動量を表します。

<percentage>

包含ブロックの幅に対する <percentage> です。

auto

以下のように指定します。

• 絶対位置指定要素では、要素の位置は left プロパティに基づいて決まり、 width: auto は内容物の幅に基づいて決まります。また、 left も auto であった場合は、要素は水平方向には静的要素が配置される場合と同様に配置されます。
• 相対位置指定要素では、通常の位置から要素までの距離は left に基づきます。また、 left も auto であった場合は、水平方向には移動しません。

解説

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

• position が absolute または fixed に設定されている場合、right プロパティは要素の右辺の外側のマージンと、包含ブロックの右辺の内側のマージンとの間の距離を指定します。位置指定要素に関連付けられたアンカー要素があり、プロパティ値に anchor() 関数が含まれいる場合、right は位置指定要素の右端を指定された <anchor-side> の辺からの相対位置を基準とします。right プロパティは、left、right、start、end、self-start、self-end、center、および <percentage> 値と互換性があります。
• position が relative に設定されている場合、 right プロパティは要素の右辺が通常位置から左方向へ移動する量を指定します。
• position が sticky に設定されている場合、 right プロパティは sticky 制約の矩形を計算するために使用されます。
• position が static に設定されている場合、 right プロパティは効果がありません。

left と right の両方が定義された場合、他のプロパティで制約されていなければ、要素は両方を満たすように引き伸ばされます。もし要素が両方を満たすように伸びることができない場合 — 例えば width が宣言されている場合 — 要素の位置は過剰制約になります。このような場合、コンテナーが左書きの場合は left の値が優先され、コンテナーが右書きの場合は right の値が優先されます。

公式定義

形式定義

right = 
  auto                 |
  <length-percentage>  |
  <anchor()>           |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor()> = 
  anchor( <anchor-name>?                  &&
  <anchor-side> , <length-percentage>? )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-side> = 
  inside        |
  outside       |
  top           |
  left          |
  right         |
  bottom        |
  start         |
  end           |
  self-start    |
  self-end      |
  <percentage>  |
  center        

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

例

絶対位置指定および相対位置指定で right を使用

HTML

<div id="relative">相対位置指定</div>
<div id="absolute">絶対位置指定</div>

CSS

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

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

結果

left と right の同時指定

left と right の両方が宣言されている場合、他の制約条件がそれを妨げない限り、要素は両方を満たすように伸びます。要素が両方を満たすように伸びたり縮んだりしない場合、要素の位置が過剰指定のとなり、コンテナーの書字方向に基づいて優先順位が決まります。コンテナーの書字方向が左書きであれば、left が優先されます。コンテナーの書字方向が右書きの場合は、right が優先されます。

HTML

<div id="parent">
  親
  <div id="noWidth">width なし</div>
  <div id="width">width: 100px</div>
</div>

CSS

div {
  outline: 1px solid #cccccc;
}
#parent {
  width: 200px;
  height: 200px;
  background-color: #ffc7e4;
  position: relative;
}
/* left と right の両方を宣言 */
#width,
#noWidth {
  background-color: #c2ffd7;
  position: absolute;
  left: 0;
  right: 0;
}
/* width を宣言 */
#width {
  width: 100px;
  top: 60px;
}

結果

仕様書

ブラウザーの互換性

関連情報

• top, bottom, left
• inset 一括指定
• inset-block-start, inset-block-end, inset-inline-start, inset-inline-end
• inset-block および inset-inline 一括指定
• position
• CSS 位置指定レイアウトモジュール