Search code examples
htmlcsstwitter-bootstrapstylesz-index

How to manage layers interleaved using z-index

I have some difficulties to manage multiple interleaved layers.

I reproduced my issue in this Plunker example

  <body>
<header>
  <nav class="navbar">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
  </nav>
</header>
<nav class="navbar row filter">
  <form class="form-inline">
    <input name="search" class="form-control" type="text" size="30"/>
  </form>
</nav>


header {
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%;
  position: relative;
  height: 80px;
  z-index: 100;
}

header .navbar {
  padding:0;
}

.dropdown-menu {
  z-index:300;
}

.filter {
  margin-top:-20px;
  background-color: black;
}

.filter form {
 z-index:200;
}

If I start from the farthest element, I should have :

  1. the filter bar container
  2. the header container
  3. the filter bar content (input)
  4. the header content (menu)

So I specified:

  • the header with a z-index 100 to go hover the filter bar
  • the filter bar content with a z-index 200 to go hover the header
  • the dropdown menu with a z-index 300 to go over all components...this one is not working, it stays under the filter bar content....why ?

I am not an expert in css, maybe there is a better ways to achieve this design but I don't understand why the dropdown menu is not over all component ?

Solution

  • Simple :) You just need to adjust z-index between header & navbar.

    header {
  z-index: 301;
}

navbar{
  z-index: 300;
}

    Have fun

    Edit: After understanding what you want exactly, you can take a look at this