○ 絶対位置と相対位置のレイアウト

styleに指定することにより、絶対位置と相対位置でレイアウトすることができます。

絶対位置 position: absolute
相対位置 position: relative


■ 絶対位置 absolute での指定

指定した座標に配置されます。

左と上を絶対位置で座標を指定、これによりボタンが左上に配置される。
<input type="button" style="position: absolute; left: 0px; top: 0px"/>

右と上を絶対位置で座標を指定、これによりボタンが右上に配置される。
<input type="button" style="position: absolute; right: 0px; top: 0px"/>

左と下を絶対位置で座標を指定、これによりボタンが左下に配置される。
<input type="button" style="position: absolute; left: 0px; bottom: 0px"/>

右と下を絶対位置で座標を指定、これによりボタンが右下に配置される。
<input type="button" style="position: absolute; right: 0px; bottom: 0px"/>

左と上を絶対位置でパーセントを指定、これによりボタンが中心から配置される。
<input type="button" style="position: absolute; left: 50%; top: 50%"/>

▼ 以上のタグを表示してみると




■ 相対位置 relative での指定

前に書かれたタグなどの、基準となる座標に対して、相対的な位置で配置されます。
ただ、前に書かれたタグの本来の位置が基準となるところがミソです。

▼ 次の相対座標で指定したタグを表示してみます

<input type="button" style="position: relative; left: 50px; top: 0px;"/>
<input type="button" style="position: relative; left: 0px; top: 50px;" />
<input type="button" style="position: relative; left: 0px; top: 0px;" />
<input type="button" style="position: relative; left: 50px; top: 50px;" />


指定した座標がずれているような気がします
下では相対座標の座標を全て0pxで設定して、本来の座標を表示しています。
そこから、上の配置をイメージすると納得できます。





■ 相対位置と絶対位置の混合

絶対位置での指定は、基準となる座標が存在しません
そのため、相対位置のボタンからは無視されます。

▼ 次の相対座標と絶対座標の混合で指定したタグを表示してみます

<input type="button" style="position: absolute; left: 50%; top: 50%"/> 絶対位置
<input type="button" style="position: relative; left: 0px; top: 0px;" /> 相対座標
<input type="button" style="position: absolute; left: 70px; top: 70px"/> 絶対位置
<input type="button" style="position: relative; left: 0px; top: 0px;" /> 相対座標



▲トップページ > Visual BASIC と C#