Css Div未堆叠在其他元素的顶部

我有一些问题获得一个图像，这是ftrBottomBanner分区的背景是在我的页面上的黑色和绿色区域的顶部。我在999尝试了div的z-index，还向父div添加了overflow属性，但没有成功。我知道这很简单，但却找不到我所缺少的

下面的图片就是我想要实现的。将橙色横幅放置在黑色上方的div内，并重叠黑色和绿色区域

示例图像：

黑色和绿色条带是相对定位的单独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>

我希望这更清楚一点

这是JSFIDLE

---

它似乎在那里工作，但在我的页面上，在任何浏览器中都不能使用相同的代码。

Hi tshirts。你能用工作图像和干净的css制作一个新的界面吗？我编辑了原始问题，并在其中添加了一个链接，介绍了我正在努力实现的目标。我的问题是横幅上显示的绿色丝带设置了绝对位置和999的z索引。如果它在JSFIDLE上工作，但在您的站点上不工作，可能您有一些其他样式覆盖了您提供给我们的样式。如果您仍然需要帮助，则没有其他方法显示指向您站点的链接。很难做到工作就是工作：）谢谢，我很感激你的关注。奇怪的是，我创建了一个页面，使用的代码与我在JSFIDLE上的代码完全相同，但在我的开发站点上仍然不起作用。现在它只是在我的本地机器上，所以我没有它的URL。我们正在重新设计网站，所以这只是初步的发展过程。谢谢。我觉得自己像个白痴，这只是IE9的问题。Chrome、Firefox和Safari for PC的一切都很好。我们的新母公司一夜之间升级了我的整个机器，我不知道他们升级了，所以IE从8升级到了9，我没有注意到。