top（位置指定）
right
bottom
left

解説

上下左右の位置を指定する属性です。position属性のrelative又はabsoluteを指定して使用します。

top：: 上端から指定する属性
right：: 右端から指定する属性
bottom：: 下端から指定する属性
left：: 左端から指定する属性

値	<length>マイナスの値の指定可 <percentage> auto：自動的（本来の位置）に指定
初期値	auto
%値の基準	親エレメントの幅（right、left）親エレメントの高さ（top、bottom）
適用	位置指定されるエレメント
継承	しない

対応状況

top

bottom

left

right

使用例

ソース

スタイル部に、

.top{position:relative;top:75px;}
.right{position:relative;right:50pxpx;}
.bottom{position:relative;bottom:50px;}
.left{position:relative;left:10%;}

と記述し、

body部に、

<div class="top">本来の位置より上から75pxの位置です。</div>
<div class="right">本来の位置より右から50pxの位置です。</div>
<div class="bottom">本来の位置より下から50pxの位置です。</div>
<div class="left">本来の位置より左から10%の位置です。</div>

と記述すると。

表示＆操作

本来の位置より上から75pxの位置です。

本来の位置より右から50pxの位置です。

本来の位置より下から50pxの位置です。

本来の位置より左から10%の位置です。

と表示されます。

pokochan@mx1.tees.ne.jp

top（位置指定） right bottom left

top（位置指定）
right
bottom
left