right
rightは、右側からの位置を指定するスタイルです。
解説
rightを指定する時は、positionの指定も必須です。
(positionの値はstatic以外)
positionで指定した位置を基準として、右側の位置が決定されます。
親要素の位置を基準としたい場合は、親要素にも positionの指定が必要です。
(値はstatic以外)
構文
構文は以下になります。
right: 値;
値
rightには以下の値が指定できます。
値 | 説明 |
---|---|
数値 | pxやemなどの単位と共に数値で指定する (例)右側から100pxの位置に表示する→right:100px; |
割合 | 割合で指定する (例)親要素に対して右側から30%の位置に表示する→right:30%; ※親要素のサイズに対しての割合になります。 |
auto | 自動で位置を指定する(デフォルト) (例)right:auto; |
太字の値は初期値です。
サンプル
右側から50pxの位置に表示する
.d1{
position:relative;
height:60px;
}
.d2{
position:absolute;
right:50px;
}
<div class="d1">
<div class="d2">あいうえお</div>
</div<
あいうえお
親要素に対して右側から30%の位置に表示する
.d1{
position:relative;
height:60px;
}
.d2{
position:absolute;
right:30%;
}
<div class="d1">
<div class="d2">あいうえお</div>
</div<
あいうえお
備考
- 同時にposition(値はstatic以外)を指定しないと、rightは有効になりません。
- 横方向の位置を指定したい場合は left、rightを使用します。
- 縦方向の位置を指定したい場合は top、bottomを使用します。
関連項目
- position:要素を表示する時の基準位置を指定する
- top:上側からの位置を指定する
- bottom:下側からの位置を指定する
- left:左側からの位置を指定する
- right:右側からの位置を指定する