当z-index不起作用时，如何使元素显示在另一个元素上？

Question

Site URL

我正在为我的网站使用Bootstrap 4导航栏折叠功能。我想要的是：

1. 展开导航栏会按下其下方的所有内容
2. 展开导航栏会涵盖其下方的所有内容

我尝试过使用z-index而没有运气。我还有其他选择吗？

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

.wrapper {
  position: relative;
  z-index: 1;
}
＆＃13;
<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 -->
＆＃13;
＆＃13;
＆＃13;

Answer 1

在这种情况下，z-index无助于使元素在另一个元素上显示重叠，您必须将该元素从其自然流中取出。

您可以在应该与其他元素重叠的元素上使用position: absolute;或position: relative;来实现此目的。

修改 但是，似乎id #hero 的元素具有clip-path属性，这会切断元素。所以它可能不是z-index的问题，而是剪辑路径属性。

如果是这种情况，遗憾的是another post没有提供解决方案来防止儿童继承剪辑路径。

Answer 2

您需要在适当的父级别应用z-index才能工作。要有效地使用z-index，需要了解stacking contexts。

它的关键在于：

  

堆叠上下文在父堆叠上下文中以原子方式处理为单个单元。

换句话说，您的菜单是位于页面内容下方的堆叠上下文的一部分。您需要更改该堆叠上下文的z-index。实际上，你需要：

#header { z-index: 2; }

注意：如果它不起作用，您需要允许#header使用MDN（上面链接）中列出的任何案例创建堆叠上下文。最简单的解决方案是为#header提供除position之外的static值（默认值）。
如果position:static上需要#header，则可以选择transform: translateX(0);或isolation:isolate;。