| 属性名 | top left bottom right |
|---|---|
| 値 | auto | <length> | <percentage> |
| 初期値 | auto |
| 適用可能要素 | ポジショニングされた要素 |
| 継承 | 継承しない |
| メディア | Visual |
| アニメーション | 可能 (<length>, <percentage> の場合) |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS2 | 5.5 | 1.0 | 1.0 | 3.5 | 1.0 |
上端、右端、下端、左端からの距離を指定します。position に absolute または relative を指定した要素に対して指定可能です。
| 値 | 説明 |
|---|---|
| <length> | 距離を長さで指定します。詳細は <length> を参照してください。 |
| <percentage> | 距離をパーセントで指定します。 |
| auto | 自動計算します。 |
下記の例では、position: relative を指定した要素を、親要素に対して右から 10px 下から 10px の位置に表示します。
.sample-canvas {
position: relative;
width: 200px;
height: 100px;
border: 1px solid gray;
}
.sample-box {
position: absolute;
bottom: 10px;
right: 10px;
}
<div class="sample-canvas"> <img src="../image/back.gif" alt="" class="sample-box"> </div>
