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

質問

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

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

回答No.1

Ogre7077 · ベストアンサー

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>の位置が問題でした。
ご回答ありがとうございました。