スタイルシート属性positionは表示位置を指定します。通常、以下のスタイルシート属性と組み合わせて使用します。
position : type
値 | 意味 |
---|---|
static | 配置方法を指定しない。positionに「static」を指定した場合はtop、right、bottom又はleftを指定しても無視される。「static」はpositionのデフォルト値なので、positionを明示的に指定していない場合も同様である。 |
relative | 通常の位置からの相対位置 |
absolute | 親要素のpositionが「absolute」、「fixed」又は「relative」の場合、親要素の左上を基準としてtop、right、bottom又はleftで指定した位置に要素を配置する。親要素のpositionが「static」の場合、Webブラウザ表示領域の左上を基準としてtop、right、bottom又はleftで指定した位置に要素を配置する。 |
fixed | 固定 |
inherit | 継承 |
スタイルシート属性 top は、上端からの表示位置を指定します。通常、スタイルシート属性 position と組み合わせて使用します。
top : position
値 | 意味 |
---|---|
auto | 自動(規定値) |
inherit | 継承 |
次にtopスタイルシート属性を使用したHTMLの例を示します。
通常位置から<span style="position: relative; top: 0.5em">0.5文字分下げる。</span>
通常位置から0.5文字分下げる。
スタイルシート属性 right は、右端からの表示位置を指定します。通常、スタイルシート属性 position と組み合わせて使用します。
right : position
値 | 意味 |
---|---|
auto | 自動(規定値) |
inherit | 継承 |
次にleftスタイルシート属性を使用したHTMLの例を示します。
通常位置から<span style="position:relative; right:2em">2文字分左にずらす。</span>
通常位置から2文字分左にずらす。
<div style="position:absolute; right:50px">左から50ピクセル離す</div>
スタイルシート属性 bottom は、下端からの表示位置を指定します。通常、スタイルシート属性 position と組み合わせて使用します。
bottom : position
値 | 意味 |
---|---|
auto | 自動(規定値) |
inherit | 継承 |
次にbottomスタイルシート属性を使用したHTMLの例を示します。
通常位置から<span style="position: relative; bottom: 0.5em">0.5文字分上げる。</span>
通常位置から0.5文字分上げる。
スタイルシート属性 left は、左端からの表示位置を指定します。通常、スタイルシート属性 position と組み合わせて使用します。
left : position
値 | 意味 |
---|---|
auto | 自動(規定値) |
inherit | 継承 |
次にleftスタイルシート属性を使用したHTMLの例を示します。
通常位置から<span style="position: relative; left: 5em">5文字分右にずらす。</span>
通常位置から5文字分右にずらす。