親のボックス要素にstaticが設定されている場合、親のボックス要素の左上が基準値となります。class="relative">ボックス2</div></div>親ボックスに対して上から50px、左から50pxの位置を指定すると、このように親ボックスの右下に配置されます。※positionを指定していない親ボックスは「static」扱いとなります。「relative」で注意が必要なことは2点あり、一つ目は相対位置指定だということです。rightで指定した位置にそのまま配置されますが、「relative」は本来配置されるべき位置(左上の位置)からの相対位置を指定する必要があるということです。二つ目は、本来配置されるべき位置が文字やmargin/paddingなどに影響されるということです。上記でボックス2の位置が親ボックスに対して若干ずれているのもそのためです。右下に配置されるはずですが、border:2pxをしているため2px分位置がずれてしまいます。先ほどと同じCSSを使用しHTMLを以下の様に書き換えて見ます。class="relative">ボックス2</div></div>「ボックス1」という文字を入れるとborderと文字の分の位置がずれます。「relative」はこのように文字やプロパティなどに影響を受けるため、使用するときは注意してください。right:0pxを指定すると、このような位置に配置されます。「absolute」で注意が必要なことが一つあり、それは位置指定にborderとmarginを考慮する必要があるということです。(「relative」と違い文字やpaddingには影響を受けません。border:2pxを取っているからです。height:50px;}marginとborderの分を合わせ12pxを引くとぴったりと右下に配置されます。基本的にpositionを利用するときは、この「absolute」が最も多く使われます。この機会にぜひ使い方を覚えてみてください。コメントをキャンセルメールアドレスが公開されることはありません。MyThemeShop。