-4

I want my Bootstrap dropdown menu to appear underneath the navbar, but it doesn't seem to be respecting the z-index style.

Broadly speaking, I have a layout like this:

<nav>         <!-- z-index: 2; -->
  <ul>
    <li>
      <ul>    <!-- z-index: 1; -->
        ...

Both the <nav> and the <ul> have position styles. Here's the full code:

.nav-submenu {
  top: 20px;
  position: absolute;
  z-index: 1;
}
.navitem-left {
  position: relative;
}
nav {
  height: 72px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.10);
  padding-top: 30px;
  position: fixed;
  z-index: 2;
  width: 100%;
}
nav ul {
  list-style-type: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav>
  <ul>
    <li class="navitem-left">
      <a href="#" class="dropdown-toggle" id="menu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">CLICK ME!</a>
      <ul class="dropdown-menu nav-submenu" aria-labelledby="menu1">
        <li>
          <a href="#">Why aren't I behind the nav?</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Why isn't the stacking working for me?

0

2 Answers 2

5

It is not behind the nav because it is a child of the nav. A child is always above its parent. If you want it to be behind the nav, it'll have to be in a seperate container from the nav. Although, I'd wonder why you'd want it to be behind the nav in the first place...?

Anyway, a child always inherits the z-index of the parent. If the parent is above something, its children will also be above said things. You can only decide which one overlaps which when they are brothers (equal nesting)

But yeah, instead of helping you with the code, I'd rather recommend you don't try this. This is pretty much impossible to maintain in responsive pages (adapting to different screen sizes) as you would have to put the sub-navigation elements outside of the actual navigation bar, only to position them right according to another container.

Definitely not recommended.

3
  • 3
    Just to add some color to this fine answer: The child's z-index is interpreted relative to its container (technically "stacking context"). One reference is w3.org/TR/CSS22/zindex.html, which is quite elaborate in its details. Sep 7, 2016 at 21:09
  • "A child is always above its parent" is not true. The parent might not establish a stacking context. See my answer for an example.
    – Oriol
    Sep 7, 2016 at 21:22
  • "A child always inherits the z-index of the parent", that isn't true either, it just defines its base stacking context if set...
    – Ricky Ruiz
    Sep 7, 2016 at 21:41
3

You misunderstood z-index. It specifies the index of that element with respect to the stacking context it belongs to.

Precisely, since you use z-index: 2 on the nav, the ul belongs to the stacking context established by the nav!

Remove that z-index to stop the nav from establishing a stacking context, set a negative z-index to the ul, and use non-transparent backgrounds.

Oh, and last year the CSS WD decided that elements with fixed positioning would always establish a stacking context, so use another positioning.

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
.nav-submenu {
  top: 20px;
  position: absolute;
  z-index: -10;
}
.navitem-left {
  position: relative;
  float: left;
}
nav {
  height: 72px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.10);
  padding-top: 30px;
  position: absolute;
  width: 100%;
  background: #fff;
}
nav ul {
  list-style-type: none;
  margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav>
  <ul>
    <li class="navitem-left">
      <a href="#" class="dropdown-toggle" id="menu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">CLICK ME!</a>
      <ul class="dropdown-menu nav-submenu" aria-labelledby="menu1">
        <li>
          <a href="#">Why aren't I behind the nav?</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

3
  • 1
    You're right, this works. But it also doesn't work. The reason I state this doesn't work, is because it gets incredibly tough to position the sub-menu's right. It's quite likely for them to dissapear behind any other div besides the parent. Like, say, the content. Especially in responsive design. It will be quite the challenge to make sure it'll always be on top. Maybe it would work to put yet another wrapper around it and give that one a Z-index? I wonder.
    – NoobishPro
    Sep 7, 2016 at 21:37
  • 1
    @Babydead Yes, wrapping the nav inside an element which establishes a stacking context may be a good idea to prevent the ul from accidentally being covered by unwanted elements.
    – Oriol
    Sep 7, 2016 at 21:42
  • 1
    In this specific case I think your answer is more complete than mine. I'm wondering if I should remove mine so your (more correct one) gets more attention..
    – NoobishPro
    Sep 8, 2016 at 11:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.