IE7でネガティブマージンが効かなかった事件

先日コーディングしていたところ、画像を軽く重ねるものに出会いまして、
いつもだったら、重なる二つにそれぞれz-indexを指定してやり、
上に重なるほうの親要素にposition:relative;を指定し、
重ねるものにposition:absolute;を指定し縦横の距離を指定してやり
重ねるのですが、今回は重ねる方に親要素がいきなりcontainerとかになってしまうので、
どうしようかと思いつつ、ネガティブマージンで引っ張りあげることにしました。

因みにネガティブマージンとは、marginの値の指定がマイナスのもの

例）	`margin:-15px;`

今回できればこんな感じで2枚の画像を重ねたかったのです。

 HTMLで書くと仮にこんな感じで

例）HTML <div class="ue"><img src="上になる画像"></div>
<div class="shita"><img src="下になる画像"></div>

例）CSS .ue{
position:relative;
z-index:200;
}
.shita{
position:relative;
z-index:100;
margin-top:-20px;
}
/* 重ねたい二つの要素の下にある要素 */
.shita2{
height:20px;
}

今回はIE6は棚に上げて作成、ところが、IE7でちっともネガティブマージンが効かない。
いろいろ調べてみたものの、position:relative;をつけたらいいというものがたくさん
あったものの、実際指定してもIE7はびくともしてくれないのです。
因みにIE8は問題なく引っ張りあがってくれました。

そうして、しばらくいろいろ試してみたのですがどうしても上手くいかず、
いきなり、position:relativeで指定するのも考えたのですが、やっぱり
あまり気が進まず、（そうするとその下の要素も同じように引っ張り挙げないと変な空間が空くので。。。）

結局、IE7のみに効くハック”*:first-child+html”にご登場いただきました！
これをIE7用に指定したいプロパティの前に指定してあげます。
そうして、IE7の時だけposition:relative;で引っ張りあげました。(その下の要素も)

⇒例）CSS .ue{ position:relative; z-index:200; }
.shita{ position:relative; z-index:100; margin-top:-20px; }
*:first-child+html .shita{
position:relative;
top:-22px; /* 2pxほど誤差がありました */
z-index:100;
margin-top:-20px;
}
/* 重ねたい二つの要素の下にある要素 */
.shita2{
height:20px;
}
*:first-child+html .shita2{
height:20px;
position-relative;
top:-22px;
}

これで、IE7にも同じように表示されたのですが、その後試しに、IE7のハックをつけずに
ネガティブマージンもつかわず、position:relative;一本使いでひっぱりあげてみると
相変わらず、IE7以外のブラウザではうまくいくのですが、なぜかIE7だけ上がってくれません。
しかして、IE7用ににハックをつけたものも、下に書いてみたのですが、
結果は同じ。。。。

私の書いたソースでは先ほどに列記したものが、一番相性が良かったようです。
まだまだ、手ごわいですね・・・・IE7・・・