Question

我遇到一些问题，将ftrBottomBanner div的背景图像放在页面上的黑色和绿色区域之上。我已经尝试了div的z-index为999，并且还将overflow属性添加到父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>

我希望这更清楚一点。

这是jsFiddle http://jsfiddle.net/tshirts/kAV42/1/

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

Div没有堆叠在其他元素之上

0 个答案: