[PR] 容量300MB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。さくらのレンタルサーバ。
位置指定の基本を理解しよう！
要素が表示される位置をピクセル単位で指定するには、「position」プロパティを使用します。
サンプルとして、ブラウザのウィンドウ枠に見立てたグレーの枠の中に、縦50ピクセル、横100ピクセルのボックスを４つ並べました。<DIV>要素は前後に改行が入るブロックレベル要素なので、デフォルトでは以下のように縦に並びます。
＜サンプルコード＞
<div style="width:100px; height:50px;">div001</div>
<div style="width:100px; height:50px;">div002</div>
<div style="width:100px; height:50px;">div003</div>
<div style="width:100px; height:50px;">div004</div>
四隅から絶対位置を指定してみよう！
「top」、「bottom」、「left」、「right」の４つのプロパティを組み合わせることで、四隅からの距離をピクセルで指定することができます。このサンプルでは、「position」プロパティを絶対指定「absolute」にしてあります。
＜サンプルコード＞
このテクニックを応用すると角丸テーブルを簡単に作成することができます。
<div style="width:100px; height:50px;
position: absolute; top:25px; left:50px;">div001</div>
<div style="width:100px; height:50px;
position: absolute; top:25px; right:50px;">div002</div>
<div style="width:100px; height:50px;
position: absolute; bottom:25px; left:50px;">div003</div>
<div style="width:100px; height:50px;
position: absolute; bottom:25px; right:50px;">div004</div>
なお、「position」プロパティの２つの値である「relative」（相対指定）と「absolute」（絶対指定）の違いについては「絶対指定と相対指定その２」で解説しています。
