Databases
StackOverflow2013
Postsdbo
POTrouble with layering divs with z-index
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTrouble with layering divs with z-index
    text
    copied!<p>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.</p> <p>Here is the actual website - <a href="http://www.richmindonline.com/test/" rel="nofollow">http://www.richmindonline.com/test/</a></p> <p>Code areas posted below:</p> <p>Here is CSS:</p> <pre><code> #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; } </code></pre> <p>Here is the HTML code to the affected area:</p> <pre><code>&lt;body class="body-&lt;?php echo $options['body_color']; ?&gt;"&gt; &lt;div id="wrapper" class="hfeed &lt;?php echo $options['skin_color']; ?&gt;-header"&gt; &lt;div id="header"&gt; &lt;div id="masthead"&gt; &lt;div id="branding"&gt; &lt;div id="blog-title"&gt; &lt;span&gt;&lt;a href="&lt;?php bloginfo( 'url' ) ?&gt;/" title="&lt;?php bloginfo( 'name' ) ?&gt;" rel="home"&gt;&lt;img src="&lt;?php echo $options['upload_image']; ?&gt;" alt="Home" /&gt;&lt;/a&gt;&lt;/span&gt; &lt;/div&gt; &lt;div id="social"&gt; &lt;h1 id="blog-description"&gt;&lt;?php echo $options['header_text']; ?&gt;&lt;/h1&gt; &lt;a href="&lt;?php echo $options['social_facebook']; ?&gt;" target="_blank"&gt;&lt;img src="&lt;?php echo bloginfo ('template_directory') . '/images/social-icons/facebook.png'; ?&gt;" width="32" /&gt;&lt;/a&gt; &lt;a href="&lt;?php echo $options['social_twitter']; ?&gt;" target="_blank"&gt;&lt;img src="&lt;?php echo bloginfo ('template_directory') . '/images/social-icons/twitter.png'; ?&gt;" width="32" /&gt;&lt;/a&gt; &lt;a href="&lt;?php echo $options['social_youtube']; ?&gt;" target="_blank"&gt;&lt;img src="&lt;?php echo bloginfo ('template_directory') . '/images/social-icons/youtube.png'; ?&gt;" width="32" /&gt;&lt;/a&gt; &lt;a href="&lt;?php echo $options['social_rss']; ?&gt;" target="_blank"&gt;&lt;img src="&lt;?php echo bloginfo ('template_directory') . '/images/social-icons/rss.png'; ?&gt;" width="32" /&gt;&lt;/a&gt; &lt;a href="&lt;?php echo $options['social_digg']; ?&gt;" target="_blank"&gt;&lt;img src="&lt;?php echo bloginfo ('template_directory') . '/images/social-icons/digg.png'; ?&gt;" width="32" /&gt;&lt;/a&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt;&lt;!-- #social --&gt; &lt;/div&gt;&lt;!-- #branding --&gt; &lt;/div&gt;&lt;!-- #masthead --&gt; &lt;/div&gt;&lt;!-- #header --&gt; &lt;nav id="access" class="menu-&lt;?php echo $options['skin_color']; ?&gt;"&gt; &lt;?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?&gt; &lt;div class="skip-link"&gt;&lt;a class="assistive-text" href="#content" title="&lt;?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?&gt;"&gt;&lt;?php _e( 'Skip to primary content', 'twentyeleven' ); ?&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="skip-link"&gt;&lt;a class="assistive-text" href="#secondary" title="&lt;?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?&gt;"&gt;&lt;?php _e( 'Skip to secondary content', 'twentyeleven' ); ?&gt;&lt;/a&gt;&lt;/div&gt; &lt;?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. */ ?&gt; &lt;?php wp_nav_menu( array( 'theme_location' =&gt; 'primary','menu_class' =&gt; 'sf-menu') ); ?&gt; &lt;/nav&gt;&lt;!-- #access --&gt; &lt;div id="main-bg" class="main-bg-full"&gt; &lt;div id="main-bg"&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload