[PR] 容量300MB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。さくらのレンタルサーバ。
ボックスを入れ子にすると？
サンプルとして、ブラウザのウィンドウ枠に見立てたグレーの枠の中に、縦100ピクセル、横100ピクセルのボックスを４つ並べました。但し、薄い緑色のボックス002だけは縦横50ピクセルに縮小してあります。
＜サンプルコード＞
<div style="width:100px; height:100px;">div001</div>
<div style="width:50px; height:50px;">div002</div>
<div style="width:100px; height:100px;">div003</div>
<div style="width:100px; height:100px;">div004</div>
ボックス002をボックス003の子要素にすると？
薄緑色■のボックス002を薄オレンジ色■のボックス003の中に入れて子要素とした上で、絶対指定で縦に25ピクセル、横に25ピクセルの位置指定を行うとこうなります。
絶対指定では、親要素からの位置指定になることは既にご説明したとおりです。このサンプルの場合、薄緑色■のボックス002の親要素は、薄オレンジ色■のボックス003になります。
＜サンプルコード＞
<div style="width:100px; height:100px;">div001</div>
<div style="width:100px; height:100px;" position:relative >div003
<div style="width:100px; height:100px;
position:absolute; top:25px; left:25px;">div002</div>
</div>
<div style="width:100px; height:100px;">div004</div>
親要素のボックス003の位置をずらすと？
上のサンプルに修正を加える形で、親要素である薄オレンジ色■のボックス003の位置を横に200ピクセルずらすと以下のようになります。薄緑色■のボックス002は絶対指定ですから、基準となる親要素が動けば、その親要素との位置関係を保ったまま一緒に動きます。
＜サンプルコード＞
<div style="width:100px; height:100px;">div001</div>
<div style="width:100px; height:100px;"
position:relative; left:200px >div003
<div style="width:100px; height:100px;
position:absolute; top:25px; left:25px;">div002</div>
</div>
<div style="width:100px; height:100px;">div004</div>
