How to make an element display over another element when z-index doesn't work?

Question

Site URL

I'm using the Bootstrap 4 nav bar collapse functionality for my site. What I would like is either:

1. Expanding the nav bar pushes down all content below it
2. Expanding the nav bar covers all content below it

I've tried using z-index with no luck. What other options do I have?

.navbar-collapse {
  display: relative;
  z-index: 2;
}

.wrapper {
  position: relative;
  z-index: 1;
}

<header id="header">
 <div id="hero">
  <nav class="navbar">
  <a class="logo navbar-brand" href="https://craze-rpg.com/index.php">Craze RPG</a>
  <button class="navbar-toggler navbar-dark bg-dark" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse bg-dark" id="navbarSupportedContent">
   <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
     <a class="nav-link" href="/guidebook.php">Guidebook</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" href="#">Face Claim</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" href="#">Advertise &amp; Affiliate</a>
    </li>
      </ul>
    </div>
 </nav>
  
 </div>
</header>
<div class="wrapper">
 <!-- Welcome back -->
    <!-- start: header_welcomeblock_member -->
<ul class="nav justify-content-end">
 <li class="nav-item">
  <!-- start: header_welcomeblock_member_user -->
<a class="nav-link hvr-float" href="https://craze-rpg.com/usercp.php" class="usercp"><i class="fas fa-user fa-2x" title="My Account"></i></a>
<!-- end: header_welcomeblock_member_user -->
 </li>
 <li class="nav-item">
  
 </li>
 <li class="nav-item">
  
 </li>
 <li class="nav-item">
  <!-- start: header_welcomeblock_member_pms -->
<a class="nav-link hvr-float" href="https://craze-rpg.com/private.php"><i class="fas fa-envelope fa-2x" title="Private Messages"></i></a>
<!-- end: header_welcomeblock_member_pms -->
 </li>
</ul>
<br class="clear">
<span class="welcome"><strong>Welcome back, <a href="https://craze-rpg.com/member.php?action=profile&amp;uid=2">Sinestra</a></strong>. <a href="https://craze-rpg.com/member.php?action=logout&amp;logoutkey=676a897231d2d9e681399958d3972e6e" class="logout hvr-icon-forward">Log Out <i class="fa fa-chevron-circle-right hvr-icon"></i></a></span>
</div>
<!-- end: header_welcomeblock_member -->

Answer 1

In cases like that, where z-index does not help to make an element appear overlapping on another element, you have to take that element out of its natural flow.

You can do that by using position: absolute; or position: relative; on the element which should overlap other elements.

Edit However, it seems that the element with id #hero has a clip-path property, which cuts off your element. So it might not be an issue of z-index but rather of the clip-path property.

If thats the case, unfortunately another post does not provide a solution to prevent clip-path to be inherited by children.

Answer 2

You need to apply z-index at the proper parent level in order to work. To work efficiently with z-index one needs to understand stacking contexts.

The key to it lies into:

Stacking contexts are treated atomically as a single unit in the parent stacking context.

In other words, your menu is part of a stacking context placed below the content of your page. You need to change the z-index of that stacking context. Practically, you need:

#header { z-index: 2; }

Note: if it doesn't work, you need to allow #header to create a stacking-context, using any of the cases outlined on MDN (linked above). The simplest solution is to give #header a position value other than static (default).
If you need position:static on #header, alternatives are to give it transform: translateX(0); or isolation:isolate;.