z-index不適用於wordpress菜單背後的圖像

我想將圖像放在我的標題和菜單後面。我把所有的背景圖像的DIV，包括所有的菜單元素position:relative;z-index:10;和股利與背景圖像的上面層，以position:relative;z-index:0;z-index不適用於wordpress菜單背後的圖像

你可以看到我的代碼在這裏：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：JUST菜單和滑動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;}

來源

2013-08-07 Denoteone

請在您的文章中添加的代碼示例，這樣其他用戶可以從你的問題以後受益。 – koningdavid

添加了CSS和HTML以供參考。謝謝。 – Denoteone

你的z-index看起來像它的正常工作對我來說。但似乎確實存在定位問題。使用width:100%將top_slider div設置爲position:absolute。或者你可以設置position:fixed如果你想保持它（也需要一個寬度）。

來源

2013-08-07 09:27:36 Coop

我不知道這是否屬實，因爲背景圖像停在菜單的右邊緣。如果我更改菜單的填充並添加更多，則會將背景div向右推。如果我將它們全部刪除，背景將完美顯示在中心。我會嘗試你推薦的寬度和其他設置。 – Denoteone

好的廢話，工作。哈哈。感謝您提供的信息，我想我只是不明白爲什麼我的方法（儘可能落後）不起作用。 – Denoteone

，就把這行你</nav>標籤之後

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

來源

2013-08-07 09:32:19

z-index不適用於wordpress菜單背後的圖像

回答

相關問題