Question

所以，我有一个下拉菜单，在悬停时下降。但是，只要下面有一个不同的div，下拉菜单就会在它后面，因此不会完全可见。

我摆弄了z-index，但它并没有改变任何东西。

Answer 1

将z-index: 9;添加到此选择器#navbar。

以下是工作代码。

* {
	font-family: "comic sans ms";
}

.spacer {
	width: 100%;
	height:95px;
}

/* Navigation bar */

#navbar {
	width: 100%;
	height: 50px;
	background-color: deeppink;
	position: fixed;
	margin-top: 5;
	left: 0;
	color: yellow;
	
	/* non-selectable text */
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
  z-index: 9;
}

.logo {
	height: 50px;
	float: left;
}

.navbutt {
	background-color: yellow;
	border: none;
	color: orange;
	height: 50px;
	width: 80px;
	font-size: 12px;
}

#comics {
	margin-left: 7px;
}

#login {
	float: right;
	margin-right: 10px;
}

#login-text {
	text-align: center;
	padding-top: 3px;
}

/* Dropdown menu */

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: fixed;
	color: orange;
	background-color: yellow;
	margin-top: 5px;
	min-width: 80px;
	z-index: 99;
}

.dropdown-content a {
	color: orange;
	text-decoration: none;
	padding-top: 15px;
	padding-bottom: 15px;
	display: block;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.dropdown-content a:hover {
	color: yellow;
	background-color: orange;
}

.navbutt:hover {
	color: yellow;
	background-color: mediumvioletred;
}


/* Image upload form */

.form-right {
	position: relative;
	float: right;
	margin-right: 100px;
}

/* Page Listbox */

.pagelist {
	background-color: skyblue;
	position: relative;
	float: right;
	width: 20%;
	height: 70%;
	overflow-y: scroll;
}

<!DOCTYPE html>
<html>
<head lang="de">
<meta charset = "UTF-8" />
<title>komix.lit - zuhause seite</title>
</head>
<body>

<div id="navbar">
<img class="logo" src="inc/logo.png" />
komix.lit
<button id="home" class="navbutt" onClick="location.href='home.php'">zuhause</button>
<button id="comics" class="navbutt" onClick="location.href='komix.php'">komix</button>
<div id=login class="navbutt dropdown"><p id='login-text'>dicctator</p><div class='dropdown-content'><span id='login-text'><a href='login.php' id='dropdown-url'>austragen</a><a href='neuerkomix.php' id='dropdown-url'>neuer Komix</a><a href='meinekomix.php' id='dropdown-url'>meine Komix</a></span></div></div></div>
<div class="spacer"></div>
<div class="content"><img src='komix\13_03_18_08_20_25-2.jpg' /><div class="pagelist"><ul><li><a href='pages.php?id=51'>Seite 1</a></li><li><a href='pages.php?id=55'>Seite 2</a></li><li><a href='pages.php?id=54'>Seite 3</a></li><li><a href='pages.php?id=52'>Seite 4</a></li><li><a href='pages.php?id=53'>Seite 5</a></li></ul></div>

</div>
</body>
<footer>
	
</footer>
</html>

Answer 2

如果我们没有明确地通过CSS设置导航栏内容落后的原因，那么默认情况下，大多数元素都会获得更高的z-index。改变如下：

#navbar {
width: 100%;
height: 50px;
background-color: deeppink;
position: fixed;
margin-top: 5;
left: 0;
color: yellow;
z-index: 10; // Key line

/* non-selectable text */
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

HTML Hover-Dropdown over div

2 个答案: