Search code examples
htmlcssz-index

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

Picture of what's happening

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 -->

Solution

  • 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.