Why is z-index not working with a pure css menu overlay?

Question

This has had me for at least three hours now. I can't figure it.

I have a css menu overlay:

#toggle-nav-label {
    text-align: center;
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 8500; /* to keep hamburger above all */
    width: 30px;
    height: 25px;
    margin-top: 40px;
    background-color: transparent
}
#menu .menu-container {
    position: fixed;
    overflow: hidden;
    z-index: -1; /* minimal z-index here */
    opacity: 0;
    width: 100%;
    height: 101%;
    left: 0px;
    top: 0px;
    background: #e39c37;
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out
}
#menu .menu-container .menu-area {
    padding-left: 4%    
}
#menu ul {
    position: absolute;
    top: 40%
}
#menu ul li { 
    margin: 0px 0px 9px 0px
}
#wrapper {
    max-width: 1200px;
    margin: 0;
    padding-top: 100px;
    padding-left: 3%;
    position: relative;
    z-index: 1000 /* more z-index than expanded overlay */
}

and some HTML

<header id="header">
     <nav id="menu">        
        <input type="checkbox" id="toggle-nav"/>
            <label id="toggle-nav-label" for="toggle-nav">
                    <div id="nav-icon">
                          <span></span>
                          <span></span>
                          <span></span>
                    </div>
             </label>  
            <script>
                $(document).ready(function(){
                  $('#nav-icon').click(function(){
                        $(this).toggleClass('open');
                   });
                });
            </script>
            <div class="menu-container">
                <div class="menu-area">
                    <ul>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                    </ul>
                </div>
            </div>
   </nav>
</header>
<div id="wrapper">
        Rest of page..
<footer>
</footer>

The .menu-container z-index is set to -1, and the wrapper has a higher z-index, but as it stands at the moment I can click the menu-overlay li links even when the menu is collapsed? Its opacity is also set to 0?

I am unable to highlight text when the menu is collapsed too. Why is this?

I did add a visibility: hidden to .menu-container, I could then select text within the wrapper, but I do not get an ease-in-out effect when the menu is toggled.

This SO article here, warns that a position: relative (positioning in general) is required for z-index elements. I have position on both.

https://jsfiddle.net/9ohpttL3/1/

`z-index` cannot be set to `-1`; it starts at `0`. Also, you need to close your CSS lines with a semicolon **before** the comments, otherwise they won't be used (such as your `z-index: 1000`). Other than that, I'm afraid I can't help much, as I can't replicate your problem. Could you please create a JSFiddle or similar? I can't seem to recreate your menu at all with your above code: https://jsfiddle.net/w660w5sy/ — Obsidian Age, Jul 20 '17 at 23:02
@ObsidianAge what do you mean it can't be set to `-1`? A negative z-index is valid. It will move the element behind all other elements that don't have a defined z-index https://codepen.io/mcoker/pen/gRVjKW — Michael Coker, Jul 20 '17 at 23:05
I was going to say, I did think it was valid...I have posted a jsFiddle :-) — davvv, Jul 20 '17 at 23:07
@davv it's because the z-index on `header` is `8000`. Assigning a z-index to the parent `header` creates a new stacking order, so `.menu-container`'s z-index is relative to `header`'s and can't go behind/under it. — Michael Coker, Jul 20 '17 at 23:11
Sorry, I was a little unclear there. I meant that a negative `z-index` will make the stacking context's **content** appear above the **background** of a descendant with a negative `z-index`, though the context will always be at the back. In most situations negative `z-index` will work fine though ;) — Obsidian Age, Jul 20 '17 at 23:12
@MichaelCoker if I remove the z-index on the header the hamburger us unclickable... — davvv, Jul 20 '17 at 23:14
this work like you expect it to? https://jsfiddle.net/9ohpttL3/4/ (edited to fix the menu animation from a burger to an x) — Michael Coker, Jul 20 '17 at 23:21
@MichaelCoker is it just me or does the collapse from open fade out wierd? From opacity 1 to 0? Other than that - works a dream! Please answer with how you did it Michael.... — davvv, Jul 20 '17 at 23:27
Negative z-indexes are valid but dangerous. Any link contained in an element with a negative z-index won't be clickable. — Capsule, Jul 20 '17 at 23:31

Michael Coker · Accepted Answer · 2017-07-21T13:49:50.187

If I understand the end goal, use a margin-top on #wrapper instead of padding-top, then you only need a z-index on your toggle button so it will appear over .main-container, then when you display the menu, add a z-index to header.

$(document).ready(function() {
  $('#nav-icon').on('click', function() {
    var $header = $('#header');
    if ($header.hasClass('open')) {
      $header.removeClass('open').one('transitionend', function() {
        $header.removeClass('front');
      });
    } else {
      $header.addClass('open front');
    }
  });
});

/*Header */

header {
  position: fixed;
  width: 100%;
  height: 80px;
  background-color: rgba(255, 255, 255, 1.00);
  color: #000;
  top: 0;
  padding: 0;
}

.front {
  z-index: 1;
}

.front #menu .menu-container {
height: 101%;
}

header a:link {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  text-decoration: none;
  min-width: 100%;
  color: #000;
}

header a:hover {
  color: #eaab00;
}

#header-area {
  max-width: 1200px;
  padding-left: 3%;
  margin: 0
}

.header-logo {
  font-family: 'Neue Helvetica W01', sans-serif;
  font-size: 15px;
  letter-spacing: 3px;
  margin-top: 35px;
  margin-left: 3px;
  display: inline-block;
  cursor: pointer;
}


/* Nav */

nav {
  float: right;
  margin: 0;
  padding: 0;
  display: inline-block;
}

#toggle-nav-label {
  text-align: center;
  display: block;
  cursor: pointer;
  position: relative;
  z-index: 2;
  width: 30px;
  height: 25px;
  margin-top: 40px;
  background-color: transparent
}

#menu .menu-container {
  position: fixed;
  overflow: hidden;
  opacity: 0;
  width: 100%;
  left: 0px;
  top: 0px;
  background: #e39c37;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  height: 0;
}

#menu .menu-container .menu-area {
  padding-left: 4%
}

#menu ul {
  position: absolute;
  top: 40%
}

#menu ul li {
  display: block;
  font-size: 50px;
  line-height: 55px;
  font-weight: 600;
  margin: 0px 0px 9px 0px;
}

#menu li a {
  text-decoration: none;
  color: #000;
}

#menu .menu-footer {
  position: absolute;
  bottom: 45px;
  width: 90%;
}

#toggle-nav {
  display: none;
}

#toggle-nav:checked ~ .menu-container {
  opacity: 1;
}

#nav-icon {
  width: 30px;
  height: 25px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #000;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon span:nth-child(2) {
  top: 6px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon span:nth-child(3) {
  top: 12px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.open #nav-icon span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -6px;
  left: 4px;
  background-color: rgba(255, 255, 255, 1.00)
}

.open #nav-icon span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

.open #nav-icon span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 15px;
  left: 4px;
  background-color: rgba(255, 255, 255, 1.00)
}


/* Wrapper */

#wrapper {
  max-width: 1200px;
  margin: 0;
  margin-top: 100px;
  padding-left: 3%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header id="header">
  <div id="header-area">
    <nav id="menu">
      <input type="checkbox" id="toggle-nav" />
      <label id="toggle-nav-label" for="toggle-nav">
        <div id="nav-icon">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </label>
      <div class="menu-container">
        <div class="menu-area">
          <ul>
            <li><a href="#">Case Studies</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Journal</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
          <div class="menu-footer">
            Footer
          </div>
        </div>
      </div>
    </nav>
  </div>
</header>
<div id="wrapper">
  <main>


    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis, nunc aliquet vulputate tempus, diam ante semper dui, id porta velit neque quis libero. Sed eget enim vehicula augue aliquam efficitur. Aliquam nec mauris nulla. Nunc viverra velit
    et lectus vulputate blandit. Suspendisse dignissim hendrerit ex sit amet euismod. Morbi nec auctor dui. In sollicitudin sem in dolor tempus, in dictum ligula finibus. Vestibulum auctor turpis quis aliquam consectetur. Donec ullamcorper lacinia odio,
    et sodales odio vestibulum at. Phasellus pharetra metus eget augue tempus, quis vestibulum mauris sollicitudin. Phasellus eget ullamcorper sapien. Sed dolor metus, pellentesque quis metus vel, eleifend tincidunt mauris. Aliquam erat volutpat. Vivamus
    sit amet libero dolor. Mauris sollicitudin lorem vel justo vestibulum fringilla. Donec consequat molestie lobortis. Aliquam id neque vulputate, cursus nunc at, consectetur arcu. Phasellus consequat fermentum purus eget laoreet. Proin pulvinar tellus
    sem, ut porttitor velit molestie nec. Nullam consectetur leo metus, nec consequat nibh auctor sit amet. Sed vel malesuada elit. Praesent consequat est mauris, ac interdum metus posuere et. In dictum volutpat ex sed mattis. Nulla et est vel sem rutrum
    faucibus. Quisque nulla mi, blandit dictum mattis in, semper in diam. Nullam auctor consequat nunc, vitae lobortis justo ullamcorper non. Quisque bibendum metus id elit gravida, at vulputate nibh placerat. Nulla a nulla dignissim, vulputate nunc eu,
    congue ex. Morbi eu diam ultrices, efficitur nisi sit amet, cursus augue. Maecenas pellentesque metus ligula, eu aliquam lorem molestie vel. Ut ac enim et odio lacinia eleifend quis commodo eros. Fusce sed pharetra sem. In blandit, augue et rutrum
    cursus, nulla nibh consequat ligula, elementum rhoncus lectus dui a sapien. In at felis bibendum nulla varius porta. Sed ultrices lacus sapien, in vehicula erat interdum nec. Praesent faucibus rutrum eros quis placerat. Morbi tincidunt justo nec nisl
    mattis, auctor vulputate magna volutpat. Suspendisse potenti. Nulla a accumsan lorem. Maecenas sed elit in orci tempor congue. Morbi ut velit et ante interdum posuere. Nam efficitur pulvinar arcu quis tempus. Pellentesque elementum aliquam erat id
    ultricies. Sed maximus dui elit, at posuere dolor pretium a. Integer tellus massa, accumsan id dapibus vitae, tincidunt id odio. Nam in nunc lectus. Sed magna augue, suscipit eu lectus bibendum, euismod tempor elit. Etiam sit amet viverra sem, ut
    dapibus sem. Duis rutrum est sit amet luctus finibus. Nam velit dolor, pharetra non justo at, lobortis consectetur nisl. Duis ut nunc vitae sem egestas elementum vel a leo. Phasellus convallis fringilla mi, et rhoncus lectus suscipit et. Fusce tincidunt
    leo sed ex feugiat, ut rutrum felis molestie. Duis libero mi, fringilla ut cursus sed, lacinia vitae lorem. Cras cursus euismod enim, ac rhoncus mi dapibus ac. Praesent et suscipit magna, nec eleifend lectus. Sed vitae enim blandit, elementum enim
    eu, hendrerit quam. Nulla sit amet dolor at libero feugiat commodo. Sed eu orci et ante ullamcorper faucibus. Suspendisse tincidunt cursus lacus, non elementum nibh accumsan quis. Etiam ligula velit, aliquet ac lobortis et, efficitur ac dolor. Etiam
    rutrum eget dui ac consequat. Suspendisse consequat placerat odio, in sodales orci facilisis non. Sed tempus leo vitae dui euismod, a consectetur dolor consectetur.
  </main>
  <footer>

  </footer>
</div>

Thanks @Michael! I guess that does make sense yes, margin instead of padding. Any ideas as to why it fades out funny? — davvv, Jul 20 '17 at 23:46
@davv when I was removing the `z-index` when the menu faded out, the `z-index` property won't transition, so the main content area was showing on top of the `header` immediately. Wrote some JS to trigger removing the `z-index` on the `header` *after* it fades out, so that it will stay on top of the main content area until it's fully faded out. Updated my answer with that. Look good? — Michael Coker, Jul 20 '17 at 23:48
Can I buy you a beer? Learnt some on this article. Thank you! — davvv, Jul 20 '17 at 23:52
I have just noticed, if you scroll down the header doesn't have a background, even though we have set one, and then brgr does not remain clickable. Is that because we have removed the z-index on the header? — davvv, Jul 21 '17 at 00:01
@davvv lol I'll take you up on the beer! Updated - that working like you'd expect it to? — Michael Coker, Jul 21 '17 at 01:26
Ha! It fades out odd again, rather too fast... maybe my dodgy toggle menu code?? haha!!! Can't thank you enough for all this help — davvv, Jul 21 '17 at 08:34
@davv doh, can't believe I didn't notice that. Updated - is that better? — Michael Coker, Jul 21 '17 at 13:50

Why is z-index not working with a pure css menu overlay?

1 Answers1