ヘッダーとメニューの後ろに画像を配置しようとしています。すべてのメニュー要素を含む背景画像 div の上のすべてのレイヤーと、背景画像を含む 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;}