Databases
StackOverflow2013
Postsdbo
POZ-index not working on fixed header and fixed drop down menu
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POZ-index not working on fixed header and fixed drop down menu
    text
    copied!<p>I am trying to design a fixed drop down menu that slides and then sits under a fixed header for my website when it's being viewed by smaller view ports. I must not be understanding something correctly because despite setting position properly and using a z-index <em>lower</em> than its parent on the nav, it still does not work correctly. On drop down it slides under the menu button I have created, but over the header and then stays above the header. Here is my code:</p> <p>HTML:</p> <pre><code>&lt;header&gt; &lt;div id="menu-button" class="up"&gt;menu&lt;/div&gt; &lt;nav role="primary" class="hide"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;foobar&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;foobar&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;foobar&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;foobar&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;foobar&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;foobar&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/header&gt; </code></pre> <p>CSS: </p> <pre><code>* { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } header { display: block; float: left; width: 100%; height: 50px; background-color: hsla(0, 0%, 20%, 1); box-shadow: 0px 2px 8px #222; position: fixed; top: 0; z-index: 99; } #menu-button { display: block; float: left; background-color: hsla(0, 0%, 50%, 1); color: #fff; border: 2px solid #222; border-radius: 6px; padding: .25em .5em; margin-left: 10px; margin-top: 10px; cursor: pointer; } .up { background-image: linear-gradient(hsla(0, 0%, 100%, .2), hsla(0, 0%, 0%, .2)); } .down { background-image: linear-gradient(hsla(0, 0%, 0%, .2), hsla(0, 0%, 100%, .2)); } nav ul { list-style:none; width: 100%; position: fixed; z-index: -1; transition: all .6s ease; -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -o-transition: all .6s ease; } .hide ul { top: -500px; } .reveal ul { top: 50px; } nav ul li a, nav ul li a:visited { display: block; float: left; width: 50%; background-color: hsla(0, 0%, 35%, 1); text-decoration: none; text-align: center; color: #fff; padding: 1em; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transition: .4s all; -webkit-transition: .4s all; -moz-transition: .4s all; -o-transition: .4s all; } nav ul li:nth-child(even) a { border-right: none; } nav ul li:hover a { background-color: hsla(0, 0%, 50%, 1); } </code></pre> <p>jQuery:</p> <pre><code>$('#menu-button').click(function () { $(this).toggleClass('down'); $('nav').toggleClass('reveal'); }); </code></pre> <p>Here's the jsfiddle I made for it: </p> <p><a href="http://jsfiddle.net/kyleshevlin/yaJyK/6/" rel="nofollow">http://jsfiddle.net/kyleshevlin/yaJyK/6/</a></p>
 

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