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

【问题标题】：z-index not working for image behind wordpress menuz-index 不适用于 wordpress 菜单后面的图像
【发布时间】：2013-08-07 09:17:22
【问题描述】：

我正在尝试将图像放在标题和菜单后面。我将背景图像 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;}

【问题讨论】：

请在您的帖子中添加代码示例，以便其他用户稍后可以从您的问题中受益。
添加了 CSS 和 HTML 以供参考。谢谢。

标签： css wordpress menu position z-index

【解决方案1】：

您的 z-index 看起来对我来说运行良好。不过似乎确实存在定位问题。将 top_slider div 设置为 position:absolute 和 width:100%。或者你可以设置position:fixed，如果你想让它保持原样（也需要一个宽度）。

【讨论】：

我不确定这是否属实，因为背景图像停在菜单的右边框。如果我更改菜单的填充并添加更多权利，它会将背景 div 推到右侧。如果我将它全部删除，则背景会完美地显示在中心。我会试试你推荐的宽度和其他设置。
好废话。哈哈。感谢您提供的信息，我想我只是不明白为什么我的方法（尽管如此落后）不起作用。

【解决方案2】：

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

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

【讨论】：