位置に関するスタイルシート属性

position

スタイルシート属性positionは表示位置を指定します。通常、以下のスタイルシート属性と組み合わせて使用します。

書式

position : type

属性値

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

スタイルシート属性 top は、上端からの表示位置を指定します。通常、スタイルシート属性 position と組み合わせて使用します。

書式

top : position

属性値

position
ピクセル単位かパーセンテージで位置を指定するか、次の値を指定します
値 意味
auto 自動（規定値）
inherit 継承

使用例と表示サンプル

次にtopスタイルシート属性を使用したHTMLの例を示します。

通常位置から<span style="position: relative; top: 0.5em">0.5文字分下げる。</span>

通常位置から0.5文字分下げる。

スタイルシート属性 right は、右端からの表示位置を指定します。通常、スタイルシート属性 position と組み合わせて使用します。

書式

right : position

属性値

position
ピクセル単位又はパーセンテージで位置を指定するか、次の値を指定します。
値 意味
auto 自動（規定値）
inherit 継承

使用例と表示サンプル

次にleftスタイルシート属性を使用したHTMLの例を示します。

通常位置から<span style="position:relative; right:2em">2文字分左にずらす。</span>

通常位置から2文字分左にずらす。 

<div style="position:absolute; right:50px">左から50ピクセル離す</div>
左から50ピクセル離す

bottom

スタイルシート属性 bottom は、下端からの表示位置を指定します。通常、スタイルシート属性 position と組み合わせて使用します。

書式

bottom : position

属性値

position
ピクセル単位かパーセンテージで位置を指定するか、次の値を指定します。
値 意味
auto 自動（規定値）
inherit 継承

使用例と表示サンプル

次にbottomスタイルシート属性を使用したHTMLの例を示します。

通常位置から<span style="position: relative; bottom: 0.5em">0.5文字分上げる。</span>

通常位置から0.5文字分上げる。

left

スタイルシート属性 left は、左端からの表示位置を指定します。通常、スタイルシート属性 position と組み合わせて使用します。

書式

left : position

属性値

position
ピクセル単位かパーセンテージで位置を指定するか、次の値を指定します。
値 意味
auto 自動（規定値）
inherit 継承

使用例と表示サンプル

次にleftスタイルシート属性を使用したHTMLの例を示します。

通常位置から<span style="position: relative; left: 5em">5文字分右にずらす。</span>

通常位置から5文字分右にずらす。