CSS Grid - 将它移到菜单栏后面

Question

问题：我正在构建网页并学习使用 CSS 的网格。但是我运行遇到了问题，因为我在页面顶部的下拉菜单位于网格项目的后面。

我试过使用 z-index: -1;和 z-index:1;几乎每个块都有菜单和网格。但至今未成功

我来了

我该怎么做？

一个fiddle看我的“问题”
这里有一个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>

Answer 1

从 .grid-item 中删除 position: relative:

.grid-container {
  display: grid;
  grid-template-columns: 350px 350px 350px;
  justify-content: center;
}

.grid-item {
  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>

Answer 2

你必须添加 'z-index: -1;' 到 '.dropdown::before' 并从 .grid-item:

中删除 position: relative

.grid-container {
  display: grid;
  grid-template-columns: 350px 350px 350px;
  justify-content: center;
}

.grid-item {
  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;
}
.dropdown::before {
  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>

我希望这个解决方案对您有所帮助

CSS Grid - 将它移到菜单栏后面

CSS Grid - move it behind the menu bar

html

css

css-grid