Question

我正在尝试定位一个位于我的顶层菜单导航顶部的网站标题。但是当我将标题移动到顶部的z-index位置时，我的导航将无法正常工作，因为该图层隐藏在它后面。

以下是实际网站 - http://www.richmindonline.com/test/

以下发布的代码区域：

这是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;
}

以下是受影响区域的HTML代码：

<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">

Answer 1

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

/* Add */

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

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

它运作得很好..

使用z-index对div进行分层的麻烦

1 个答案: