○ 絶対位置と相対位置のレイアウト
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#