2

I'm trying to position a website header that will sit on top of my top menu navigation. But when I move header to the top z-index position, my navigation will not function because the layer is hiding behind it.

Here is the actual website - http://www.richmindonline.com/test/

Code areas posted below:

Here is CSS:

   #wrapper {
    margin: 0 auto;
    width: 984px;
   }


#main-bg {
    width: 940px;
    clear:both;
    display: block;
    margin: 0px auto;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
    background:#f0f0f0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


#access div {
    margin: 0px 0px 0px 20px;
    height:100%;
}

#access {
    display: block;
    margin: 0px auto;
    width: 940px;
    height: 37px;
    padding: 11px 0px 0px 0px;
    background:#f0f0f0;
    position:relative;
    z-index:-1;
}

#access ul {
    height:100%;
    font-size: 11px;
    list-style: none;
    margin: 0 0 0 -0.8125em;
}

#access ul li {
    float: left;
    position: relative;
    z-index:0;

}

#access a {
    color: #555;
    font-family:nobile;
    display: block;
    line-height: 35px;
    padding: 0px 1.2125em 0px 1.2125em;
    text-decoration: none;
    position:relative;
    z-index:1;
}

#access ul ul {
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top: 3.0em;
    left: 0;
    width: 188px;
    z-index: 9999;
}

Here is the HTML code to the affected area:

<body class="body-<?php echo $options['body_color']; ?>">
  <div id="wrapper" class="hfeed <?php echo $options['skin_color']; ?>-header">
    <div id="header">   
      <div id="masthead">
        <div id="branding">
          <div id="blog-title">
            <span><a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><img src="<?php echo $options['upload_image']; ?>" alt="Home" /></a></span>                          
          </div>

          <div id="social">
            <h1 id="blog-description"><?php echo $options['header_text']; ?></h1>
              <a href="<?php echo $options['social_facebook']; ?>" target="_blank"><img src="<?php echo bloginfo ('template_directory') . '/images/social-icons/facebook.png'; ?>" width="32" /></a>
              <a href="<?php echo $options['social_twitter']; ?>" target="_blank"><img src="<?php echo bloginfo ('template_directory') . '/images/social-icons/twitter.png'; ?>" width="32" /></a>
              <a href="<?php echo $options['social_youtube']; ?>" target="_blank"><img src="<?php echo bloginfo ('template_directory') . '/images/social-icons/youtube.png'; ?>" width="32" /></a>
              <a href="<?php echo $options['social_rss']; ?>" target="_blank"><img src="<?php echo bloginfo ('template_directory') . '/images/social-icons/rss.png'; ?>" width="32" /></a>
              <a href="<?php echo $options['social_digg']; ?>" target="_blank"><img src="<?php echo bloginfo ('template_directory') . '/images/social-icons/digg.png'; ?>" width="32" /></a>
          <div class="clear"></div>
        </div><!-- #social -->
  </div><!-- #branding -->
   </div><!-- #masthead -->
 </div><!-- #header -->


 <nav id="access" class="menu-<?php echo $options['skin_color']; ?>">

            <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
            <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
            <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
            <?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
            <?php wp_nav_menu( array( 'theme_location' => 'primary','menu_class' => 'sf-menu') ); ?>
        </nav><!-- #access -->


<div id="main-bg" class="main-bg-full">

<div id="main-bg">
4

1 回答 1

2

您只需要给<div class="rev_slider_1_1_wrapper"></div>（产品滑块）一个相对位置和一个小于z-index on 的 z-index <nav id="access"></nav>，例如

/* Add */

.rev_slider_1_1_wrapper {
position: relative;
z-index: 1;
}

nav#access {
position: relative;
z-index: 2;
}

它工作得很好..

于 2013-04-10T18:22:35.260 回答