z-index doesn't work properly

Question

I have problem with setting z-index in 3 containers.

The first two are for web menu, and the third one is for language select. I have no idea why the expanded menu doesn't cover the language selection.

Here is the code, thank you for your advice!

HTML:

 <div id="menu">
      <div class="nabidka">
<nav id="navigation">
    <a class="menu_button" href="#footer_nav" onclick="toggleNav(); return false;">MENU</a>
    <ul id="navigation_list" role="navigation">
<li style="padding-left: 0;"><a href="/">HOME</a></li>
......
    </ul>
</nav>
      </div>

      <div id="lang">
language select...
      </div>


      </div>

CSS:

#navigation ul {
    display: none;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 0; 
    margin-top: 20px;
    z-index: 2;
}
#navigation ul.expanded {
    display: block;
    z-index: 2;
}
#navigation li {
display: block;
width: auto;
padding: 0;
z-index: 2;
}

  #lang {
  position: absolute;
  top: 50px;
  right: 5px;
  z-index: 1;
  }

You're applying `z-index` to non-positioned elements. That's why it's not working. http://stackoverflow.com/a/35772825/3597276 — Michael Benjamin, Mar 08 '16 at 21:39
@TylerH, I didn't post as duplicate because most dupe answers are not entirely correct (primarily because they are outdated). Practically every answer says that for `z-index` to work an element must be positioned. Although that's true in most cases (including this question), it's no longer true in all cases. `z-index` will work on **flex items** and **grid items** even with `position: static`. If you're interested, see the link in my previous comment. — Michael Benjamin, Mar 08 '16 at 21:45
@Michael_B is right, but the question seems a duplicate. Best regards, — Alexander Bell, Mar 08 '16 at 21:46
@Michael_B Thanks for pointing that out. It's because flex containers establish a context that is not affected by floats. I'll update that target answer. — TylerH, Mar 08 '16 at 21:49
I highly recommend reading this: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ — AtheistP3ace, Mar 08 '16 at 21:56

Kirill Chatrov · Accepted Answer · 2016-03-08T22:15:47.680

2

You will need to add a position property to all elements that have a z-index property. Try adding position: relative to all of them.

Also refer to this documentation: z-index CSS | MDN

edited Mar 08 '16 at 22:15

answered Mar 08 '16 at 21:42

Kirill Chatrov

822
6
11

nice, it works now, thank you! – H Sturma Mar 08 '16 at 21:44
1

Does z-index work with statically positioned elements? I'm not sure that it does, but otherwise, yeah this is exactly what OP would need. – sm1215 Mar 08 '16 at 21:45
Great! `position: static` won't work. Because `position: static` simply means to "Ignore" all the positioning instructions from `left`, `right`, `top` and including `z-index`. It is also a default property of a `div`. – Kirill Chatrov Mar 08 '16 at 21:47
1

it worked with `position: relative` for me – H Sturma Mar 08 '16 at 22:02
I've edited my answer - I've included `static` by mistake, I apologize. – Kirill Chatrov Mar 08 '16 at 22:16

z-index doesn't work properly

1 Answers1