Html 使用z索引分层div的问题_Html_Css_Positioning

Html 使用z索引分层div的问题

html css

Html 使用z索引分层div的问题,html,css,positioning,Html,Css,Positioning,我正在尝试定位一个网站标题，它将位于我的顶部菜单导航的顶部。但当我将标题移动到顶部z索引位置时，我的导航将不起作用，因为图层隐藏在它后面以下是实际的网站- 代码区域如下：以下是CSS： #wrapper { margin: 0 auto; width: 984px; } #main-bg { width: 940px; clear:both; display: block; margin: 0px auto; borde

我正在尝试定位一个网站标题，它将位于我的顶部菜单导航的顶部。但当我将标题移动到顶部z索引位置时，我的导航将不起作用，因为图层隐藏在它后面

以下是实际的网站-

代码区域如下：

以下是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">


您只需要给
（产品滑块）一个相对位置和一个小于
上z索引的z索引，例如
/* Add */

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

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

这是一个简单的html css问题，而不是html5或css3。z-index是html4I中的一个属性，我完全忘了提到我遇到的一个问题是id#access
必须保持在标题的阴影下方。当我执行您的建议时，导航菜单将移动到标题图像的顶部。