うまくスタイルが適応されないのはなぜ

こちらの動画を参考にプログラミングしています。
ニコニコ動画
http://www.nicovideo.jp/watch/sm8391299

なぜ四角が重ならないのでしょうか。
現在の状況は以下のコードです。
http://yyfor.blog.fc2.com/blog-entry-1.html

No.1 ベストアンサー 回答者： Ogre7077 回答日時： 2013/04/24 17:46

position:relative は、通常通りレンダリングした後に位置をずらす指定なので、

この記法だと、四角の下に1pxだけ右下にズレた四角が表示されるだけです。

<div style="position:relative;width:32px;height:32px;background-color:#000"></div>
<div style="position:relative;top:1px;left:1px;width:30px;height:30px;background-color:#0e0"></div>

四角を内部に重ねるのなら、発想を変えて四角の中に四角を入れては如何でしょう

<div style="position:relative;width:32px;height:32px;background-color:#000">
<div style="position:relative;top:1px;left:1px;width:30px;height:30px;background-color:#0e0">
</div>
</div>

または position:absolute で絶対位置指定をすれば解決です。

<div style="position:relative">
<div style="position:absolute;top:0px;left:0px;width:32px;height:32px;background-color:#000"></div>
<div style="position:absolute;top:1px;left:1px;width:30px;height:30px;background-color:#0e0"></div>
</div>

この回答へのお礼

</div>の位置が問題でした。
ご回答ありがとうございました。

お礼日時：2013/04/25 19:06