所以我创建了一个画廊页面来保存网站的图像，并且该页面的图像似乎位于我的导航栏下拉框的前面。由于下拉框在图像后面，我无法单击它们来浏览其他页面。有没有一种方法可以使下拉框优先于图像？这样，我就可以像往常一样使用下拉框了。这是代码：
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: #788bc8;
min-height: 100vh;
overflow-x: hidden;
}
span {
color: white;
}
.navbar {
background-color: #d0f0c0;
height: 80px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 3%;
}
.logo {
font-size: 45px;
}
.logo a {
color: red;
text-decoration: none;
}
.navbar ul {
display: flex;
list-style-type: none;
}
.navbar ul li {
padding: 10px 25px;
position: relative;
}
.navbar ul li a {
color: black;
text-decoration: none;
font-size: 22px;
transition: all 0.2s;
}
.fas {
float: right;
margin-left: 10px;
padding-top: 3px;
}
.navbar ul li a:hover {
color: #4dac62;
}
.navbar ul li :where(.dropdownda, .dropdownfa) ul {
display: block;
margin: 10px;
text-align: center;
}
.navbar ul li :where(.dropdownda, .dropdownfa) ul li {
width: 200px;
padding: 10px;
}
.dropdownda,
.dropdownfa {
display: none;
position: absolute;
left: 0;
top: 100%;
background-color: #d0f0c0;
}
.navbar > ul > li:hover :where(.dropdownda, .dropdownfa) {
display: block;
}
.main {
position: relative;
justify-content: center;
align-items: center;
margin-top: 10px;
width: 100vw;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 300px));
column-gap: 10px;
row-gap: 10px;
padding: 10px 0px;
}
img {
width: 300px;
height: 300px;
object-fit: cover;
object-position: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Be Aware - First Response</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
/>
</head>
<body>
<div class="navbar">
<h1 class="logo">
<a href="home.html">BE <span>AWARE</span></a>
</h1>
<ul>
<li>
<a href="#">Drug Advocacy <i class="fas fa-caret-down"></i></a>
<div class="dropdownda">
<ul>
<li><a href="dAwareness.html">Drug Awareness</a></li>
<li><a href="dTypes.html">Types of Drugs</a></li>
<li><a href="aAndp.html">Abuse and Prevention</a></li>
</ul>
</div>
</li>
<li>
<a href="#">First Aid <i class="fas fa-caret-down"></i></a>
<div class="dropdownfa">
<ul>
<li><a href="faExplain.html">Explaining First Aid</a></li>
<li><a href="faPurpose.html">Purpose of First Aid </a></li>
<li><a href="faKit.html">First Aid Kit</a></li>
</ul>
</div>
</li>
<li><a href="cause.html">Our Cause</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="login.html">Logout</a></li>
</ul>
</div>
<div class="main">
<img src="img1.png" alt="" />
<img src="img2.png" alt="" />
<img src="img3.jpg" alt="" />
<img src="img4.png" alt="" />
</div>
</body>
</html>我不确定图片是否会显示在代码片段中，但您会注意到下拉框将位于图片应位于的位置后面。我试过下拉框上的
!important在 CSS 中，您需要为图像和下拉列表分配一个 z-index。较高的是 z-index 编号，较高的是页面上的元素。
img {
z-index: 0
}
.dropdown {
z-index: 1
}
数字可以是任何东西，只要下拉列表的数字更高