所以我创建了一个画廊页面来保存网站的图像，似乎页面的图像在我的导航栏的下拉框前面。而且由于下拉框在图像后面，我无法点击它们来浏览其他页面。有没有一种方法可以优先考虑下拉框而不是图像？这样，我就可以像往常一样使用下拉框了。代码如下：
* {
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，但它不做任何事情。
3条答案
按热度按时间14ifxucb1#
更容易地添加最大z索引值仅下拉
pbpqsu0x2#
在CSS中，您需要为图像和下拉列表分配z索引。较高的z索引意味着元素将更接近页面元素垂直堆叠的顶部。
数字可以是任何数字，只要
dropdown的值更大。whitzsjs3#
尝试将
z-index:1;添加到下拉列表中，并将z-index:0;添加到图像中，将下拉列表放在图像上方。