css - Divが他の要素の上にスタックされていない

Question

ftrBottomBanner divの背景である画像を、ページの黒と緑の領域の上に配置する際に問題が発生します。999でdivのz-indexを試しましたが、運が悪かったので、親divにオーバーフロープロパティを追加しました。私はそれが単純なものであることを知っていますが、私が欠けているものを見つけることができません。

下の画像は私が達成しようとしていることです。div内のオレンジ色のバナーを黒の上に配置し、黒と緑の領域を重ねます。

サンプル画像： http： //www.woodsequipment.com/uploadedimages/layering_question.png

黒と緑のバンドは相対的に配置された個々のdivであり、メニューとオレンジ色のバナーを含む黒い領域の中央にコンテナdivがあります。

私がやろうとしているのは、オレンジ色のバナーを緑色の領域に重ねることです。

CSSは次のとおりです。

/**** Footer ****/
div#footer{position:relative; width:100%; bottom:0; border:1px solid blue;}
    div#footerBlackRibbon{position:relative; height:51px; width:100%; background-color:#000000;border:1px solid white;}
    div#bottomMenuContainer{position: relative; top: 0px; left:0px; height:50px; width: 950px; margin: 0 auto; border:1px solid red; }
        div#ftrBottomBanner{position:absolute; top:0px; left:695px; background-image: url(images/footerBanner.png); width:216px; height:137px; background-repeat:no-repeat; border:3px solid aqua; z-index:999;}
        div#ftrBlackMenu{position:relative; top:18px; left:0px; }

div#footerGreenRibbon{position:relative; height:187px; width:100%; background-color:#bed73d; overflow:visible;}

div#footerWhiteRibbon{position:relative; height:30px; width:100%; background-color:#ffffff; } 

そしてHTML：

<div id="footer">
    <div id="footerBlackRibbon">                     
        <div id="bottomMenuContainer">
            <div id="ftrBottomBanner"></div> 
                <div id="ftrBlackMenu">                        
                    <ul id="navlist">
                        <li id="active"><a href="#" id="current">Dealer Login</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">About Woods</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Terms of use</a></li>
                    </ul>                        
                </div>                    
            </div>
        </div>
        <div id="footerGreenRibbon">
        </div>
        <div id="footerWhiteRibbon">
        </div>  
    </div>

これがもう少し明確になることを願っています。

これがjsFiddlehttp : //jsfiddle.net/tshirts/kAV42/1/です

そこでは機能しているように見えますが、どのブラウザでも同じコードを使用している私のページでは機能していません。