时间戳

首页 > 解决方案 > 当 z-index 不起作用时，如何使一个元素显示在另一个元素上？

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

问题描述

正在发生的事情的图片

网站网址

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

  1. 展开导航栏会下推其下方的所有内容
  2. 展开导航栏覆盖它下面的所有内容

我试过使用 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 -->

标签： htmlcssz-index

解决方案

在这种情况下，z-index 不能帮助使一个元素看起来与另一个元素重叠，您必须将该元素从其自然流动中取出。

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

编辑 然而，id为 #hero的元素似乎有一个 clip-path 属性，它会切断你的元素。所以它可能不是 z-index 的问题，而是 clip-path 属性的问题。

如果是这样，不幸的是，另一篇文章没有提供解决方案来防止剪辑路径被孩子继承。

推荐阅读