CSS便利帳

(1) ブロックの入れ子構造でテーブルを作成する
“position:”を利用します。
ポジショニングの方法を、static(規定値:本来の位置)、relative(本来の位置からの相対位置指定)、absolute(絶対位置指定)、fixed(絶対位置に固定)、inherit(継承)のいずれかで指定します。fixed は画面のスクロールに対して固定されます。
absolute は、relative または absolute を指定した親要素(無ければページ)の左上を原点とします。下記のようにすることで、親要素を原点とした絶対位置(=親要素からの相対位置)で座標を指定することが可能になります。

<div style=”position:relative; width:70px; height:70px; background-color:silver;”>
  <div style=”position:absolute; top:10px; left:10px; width:30px; height:30px; background-color:red;”></div>
  <div style=”position:absolute; top:20px; left:20px; width:30px; height:30px; background-color:blue;”></div>
  <div style=”position:absolute; top:30px; left:30px; width:30px; height:30px; background-color:green;”></div>
</div>