right：右からの配置位置（距離）を指定する
| 適用対象 | 位置指定が有効な要素 |
| 継承 | しない |
rightプロパティは、positionプロパティで指定した要素の配置方法（基準位置）を基に、右からの配置位置を指定するために使用します。rightプロパティは、positionプロパティの値がstatic以外のときに有効となります。
上からの距離：topプロパティ
右からの距離：rightプロパティ
下からの距離：bottomプロパティ
左からの距離：leftプロパティ
重なる順序 ：z-indexプロパティ
rightに与えられる値
- right: auto;
- 自動的に配置します。これが初期値です。
- right: 数値で指定する;
- [px]や[em]などの任意の単位に数値を指定して位置を決めます。
- right: 値%;
- 親要素の幅・高さに対する割合を％で指定します。
rightの使用サンプル
CSS
.box_sample01 {
position: relative;
height: 300px;
border: 1px solid #333333;
padding: 5px;
}
.box_sample02 {
position: absolute;
top: 30px;
right: 30px;
height: 100px;
border: 1px solid #666666;
background-color: #FFCCCC;
padding: 5px;
}
.box_sample03 {
position: absolute;
top: 100px;
right: 100px;
height: 100px;
border: 1px solid #666666;
background-color: #CCCCFF;
padding: 5px;
}
XHTML
<div class="box_sample01"> box_sample01 [position: relative;]<br /> <div class="box_sample02"> box_sample02 [position: absolute;]<br /> top:30px;, right:30px;<br /> </div> <div class="box_sample03"> box_sample03 [position: absolute;]<br /> top:100px;, right:100px;<br /> </div> </div>
表示確認
box_sample01 [position: relative;]
box_sample02 [position: absolute;]
top:30px;, right:30px;
top:30px;, right:30px;
box_sample03 [position: absolute;]
top:100px;, right:100px;
top:100px;, right:100px;
rightに関連するCSSプロパティ
| 要素の表示や配置方法 | |
|---|---|
| alignment-adjust | 要素の水平位置を揃える基準を指定する |
| alignment-baseline | 要素の水平位置を揃える際に親要素との相対関係に基いて指定する |
| bottom | positionに従って要素を配置する際に、底辺からの距離を指定する |
| clear | 要素の回り込み（float）を解除する |
| clip | 要素の回り込み（float）を解除する |
| display | 要素の表示形式を指定する |
| float | 要素を右または左へ寄せて配置する |
| left | positionに従って要素を配置する際に、左辺からの距離を指定する |
| overflow | 要素からはみ出した内容の表示方法をまとめて指定する |
| overflow-style | 要素からはみ出した内容の表示スタイルを指定する |
| overflow-wrap | 長い単語の折り返し方法について指定する |
| overflow-x | 要素からはみ出した内容の水平方向の表示方法を指定する |
| overflow-y | 要素からはみ出した内容の垂直方向の表示方法を指定する |
| position | 要素の配置方法について相対的か絶対的にするかを指定する |
| right | positionに従って要素を配置する際に、右辺からの距離を指定する |
| vertical-align | ボックス内のインライン要素に縦位置を揃える基準を指定する |
| visibility | 要素の領域を残したまま表示・非表示を指定する |
| z-index | 要素の重なり順序を指定する |
| zoom | 要素の表示倍率（拡大・縮小）を指定する |