Gradient overlays text despite custom z-indexes and DOM placement

Question

I'm trying to put a gradient at the top of a page to make a smooth transition from the navbar into the map in the body of the page; both the side nav and the top nav overlay it no problem with z-index: 2 (the map is 0 and the gradient is 1). However, when I tried to move the page title and toolbar over the gradient, nothing happened. I tried z-indexes as well as moving the title markup to put it before the gradient in the DOM, but neither of those actions-- or the combination thereof-- fixed the problem. Any ideas what's happening here?

The html markup for the two elements in question now looks like this:

<div class="page-head container">
  <h1 class="page-title" id="map-title">Drivers</h1>
  <div class="btn-group tools" role="group" aria-label="Choose view type">
    <button type="button" class="btn btn-secondary" aria-label="Map"><i class="icon-asset-5"></i></button>
    <button type="button" class="btn btn-secondary" aria-label="Table"><a class="unlink-light" href="tables.html"><i class="icon-table"></i></a></button>
    <button type="button" class="btn btn-secondary" aria-label="List"><i class="icon-th-list"></i></button>
  </div>
</div>
<div class="top-gradient"></div>

Here's a link to the codepen: https://codepen.io/redheadedmandy/pen/yEOrMQ

Answer 1

You need to add position: value to your css and remove the !important:

nav {
z-index: 2;
position: relative;
}

#sidebar {
z-index: 2;
position: relative;
}

h1 {
z-index: 100;
position: relative;
}
#page-head {
z-index: 100;
position: relative;
}