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

Question

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

展开导航栏会下推其下方的所有内容
展开导航栏会覆盖其下方的所有内容

我试过使用 z-index 但没有成功。我还有哪些其他选择？

.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

在这种情况下，z-index 无助于使一个元素看起来与另一个元素重叠，您必须将该元素从其自然流中移除。

您可以通过在应该与其他元素重叠的元素上使用 position: absolute; 或 position: relative; 来做到这一点。

编辑但是，好像id为#hero的元素有一个clip-path属性，把你的元素截断了。所以这可能不是 z-index 的问题，而是 clip-path 属性.

的问题

如果是这样，不幸的是 another post 没有提供防止 clip-path 被 children 继承的解决方案。

Answer 2

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

关键在于：

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

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

#header { z-index: 2; }

注意： 如果它不起作用，您需要允许 #header 使用 MDN 上列出的任何案例创建堆叠上下文（链接多于）。最简单的解决方案是给 #header 一个 position 值而不是 static （默认值）。
如果你在 #header 上需要 position:static，替代方案是给它 transform: translateX(0); 或 isolation:isolate;.

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

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

html

css

z-index