html - 複数の相対 div の上に IE6 および IE7 の絶対配置 div を配置

Question

IE6 と IE7 で複数の絶対位置の div を複数の相対位置の div にオーバーラップさせることは可能ですか?

詳細については、この jsFiddle を参照してください: http://jsfiddle.net/btker/1/

HTML

<div class="wrapper">
    <div class="relative_div">Relative div.
        <div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
    </div>
</div>

<div class="wrapper">
    <div class="relative_div">Relative div.
        <div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
    </div>
</div>

CSS

.wrapper{
height: 100%;
width: 100%;
}

.relative_div {
    height: 75px;
    width: 200px;
    border: 1px solid #000;
    padding: 10px;
    background: #e6e6e6;
    margin: 0 0 35px 0;
    position: relative;
}
.absolute_div {
    height: 100px;
    width: 250px;
    border: 1px solid #000;
    background: #c6c6c6;
    padding: 10px;
    position: absolute;
    top: 40px;
    left: 100px;
    z-index: 100;
}

2 つ<div>の相対 (同一のラッパーに配置) があり、それぞれ<div>がすべての相対をオーバーラップする絶対を含みます<div>。これは、Chrome、Firefox などの更新されたバージョンでは問題なくうまく機能し、絶対値<div>はz-index常に一番上に配置されます。

IE6 および IE7 では、これは機能しません。この問題と標準の「ヘッダーのドロップダウンがページコンテンツの背後にメニューを表示する」の違いは、そのような状況では、その特定のメニューの親要素に他の z-index などを与えることでしばしば修正されることです。この場合、両方の絶対<div>sは同一<div>の s に入れられます。

これを解決して、絶対s が常にIE6 & IE7 の<div>すべての相対 s の上にあるようにすることはできますか? <div>IE の条件付きコメントを使用して、ソリューションをクロスブラウザーにすることができます。