Question

我正在尝试将图片放在标题和菜单后面。我将背景图像div上方的所有图层（包括所有菜单元素）设置为position:relative;z-index:10;，将背景图像设置为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;}

Answer 1

你的z-index看起来对我来说很好。虽然似乎确实存在定位问题。将top_slider div设置为position:absolute width:100%。或者您可以设置position:fixed，如果您希望它保持不变（也需要宽度）。

Answer 2

将此行放在</nav>代码

之后

<div style="clear:both"></div>

z-index不适用于wordpress菜单后面的图像

2 个答案: