【发布时间】：2022-02-12 02:19:54
【问题描述】：
问题：我正在构建一个网页并学习使用CSS 的网格。 但是我遇到了一个问题，因为我在页面顶部的下拉菜单位于网格项目的后面。
我尝试过使用 z-index: -1;和z-index：1；几乎每个街区都有关于菜单和网格的内容。 但到目前为止一直没有成功。
所以我来了。
我该怎么做？？
看我的“问题”
这是问题的FIDDLE。
可能只是我缺少一些明显的东西，但我仍在学习：D
.grid-container {
display: grid;
grid-template-columns: 350px 350px 350px;
justify-content: center;
}
.grid-item {
position: relative;
border: 2px solid rgb(13, 7, 95);
margin: 5px;
padding-left: 20px;
font-weight: bold;
}
.menu-bar {
border-radius: 25px;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
display: inline-flex;
background-color: rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
align-items: center;
padding: 0 10px;
margin: 50px 0 0 0;
}
.menu-bar li {
list-style: none;
color: white;
font-family: sans-serif;
font-weight: bold;
padding: 12px 16px;
margin: 0 8px;
position: relative;
cursor: pointer;
white-space: nowrap;
}
.menu-bar li::before {
content: " ";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: 0.2s;
border-radius: 25px;
}
.menu-bar li:hover {
color: black;
}
.menu-bar li:hover::before {
background: linear-gradient(to bottom, #e8edec, #d2d1d3);
box-shadow: 0px 3px 20px 0px black;
transform: scale(1.2);
}
ul {
list-style-type: none;
margin: 10px;
padding: 10px;
}
li {
float: center;
}
li a,
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
z-index: 1;
}<ul class="menu-bar">
<li class="dropdown">
<p>Test 1</p>
<div class="dropdown-content">
<p> test 1 </p>
<p> test 2 </p>
<p> test 3 </p>
<p> test 4 </p>
</div>
</li>
<li class="dropdown">
<p>Test 2</p>
<div class="dropdown-content">
<p> test 1 </p>
<p> test 2 </p>
<p> test 3 </p>
<p> test 4 </p>
</div>
</li>
<li class="dropdown">
<p>Test 3</p>
<div class="dropdown-content">
<p> test 1 </p>
<p> test 2 </p>
<p> test 3 </p>
<p> test 4 </p>
</div>
</li>
<li class="dropdown">
<p>Test 4 </p>
</li>
<li class="dropdown">
<p>Test 5 </p>
<div class="dropdown-content">
<p> test 1 </p>
<p> test 2 </p>
<p> test 3 </p>
<p> test 4 </p>
</div>
</li>
</ul>
<div class="grid-container">
<div class="grid-item">
<p> hello world </p>
</div>
</div>【问题讨论】：
-
您正在定位网格项目，但您没有定位它们的父项，因此系统会“寻找备份”寻找具有位置的祖先（或者如果所有其他方法都失败，则使用主体）并将项目相对于那。您可以向父级添加位置（或删除项目上的位置）。