1

我在获取作为 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>

我希望这更清楚一点。

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

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

4

0 回答 0