0

我正在尝试将图像放在标题和菜单后面。我将背景图像 div 上方的所有图层（包括所有菜单元素）设置为position:relative;z-index:10;，并将具有背景图像的 div 设置为position:relative;z-index:0;

你可以在这里看到我的代码：http ://wheresuccessblooms.com/wordpress/

我知道它与菜单有关，因为当我删除对菜单的调用时，背景图像会转到应有的位置。不确定我还需要将位置和 z-index 设置为什么？拔掉我的头发。大声笑请帮助。

HTML：

<div class="menu-main-menu-container">
  <ul id="menu-main-menu" class="menu">
    <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16">
      <a href="http://wheresuccessblooms.com/wordpress/contact-us/">HOME</a>
    </li>
    <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17">
        <a href="http://wheresuccessblooms.com/wordpress/contact-us/">ABOUT</a>
    </li>
    <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15">
        <a href="http://wheresuccessblooms.com/wordpress/contact-us/">Contact Us</a>
    </li>
</ul>
</div>

                        <div id="top_slider">
                            <div id="slider">
                                <div id="slider_wrap">

                                </div>
                            </div>  
                        </div>

CSS：只是菜单和滑块 CSS

nav{position:relative;z-index:5;}
div.menu-main-menu-container{position:relative;z-index:5;}
ul#menu-main-menu{position:relative;z-index:5;}
li.menu-item{position:relative;z-index:5;}
#page_nav {width:100%; height:53px;background-color:#f27479;position:relative;z-index:10;}
#page_nav ul { float: left; display: block;position:relative;z-index:5;}
#page_nav ul li { float: left; list-style-type: none; margin-top:20px;border-right:1px solid #ca6064;position:relative;z-index:5;}
#page_nav ul li a { color: #fff; text-decoration: none; font-size: 14px; text-transform: uppercase; font-weight: 700; text-shadow: 0px 1px 0px rgba(0,0,0,.5); padding-left: 20px;position:relative;z-index:5; }
#page_nav ul li a:hover { color: #a2a2a2; position:relative;z-index:5;}
#page_nav ul li.current a, 
#page_nav ul li.current a:hover { color: #ba4040; position:relative;z-index:5;}

#top_slider{overflow:hidden;position:relative;z-index:0;left:0px;height:963px;top:-250px; margin:0px auto;
background:url('http://wheresuccessblooms.com/wordpress/wp-content/themes/WhereSuccessBlooms/images/slide_1.jpg') no-repeat top center;}
4

2 回答 2

1

您的 z-index 看起来对我来说工作正常。不过似乎确实存在定位问题。将 top_slider div 设置为position:absolutewith width:100%。或者您可以设置position:fixed是否希望它保持原样（也需要宽度）。

于 2013-08-07T09:27:36.093 回答
0

将此行放在您的</nav>标签之后

<div style="clear:both"></div>
于 2013-08-07T09:32:19.950 回答