移动导航在下拉菜单下方显示可点击元素

Question

我在 youtube 上按照本教程创建了一个移动导航 https://www.youtube.com/watch?v=IF6k0uZuypA。

this picture is fully opaque and nothing behind dropdown shows through. However, only on the 'reviews list' page, where the sort by and add review elements are, the elements underneath the dropdown show and mess the mobile nav up, as shown here 中显示的导航下拉菜单。

我正在使用 React，MUI material 图标 https://mui.com/components/material-icons/ for the 'add' icon and MUI select for the sort and order by https://mui.com/components/selects/。

我把MUI的添加图标换成Fontawesome，问题依旧

我也试过将下拉菜单的 Z-index 设置为 1，将下方添加图标的 Z-index 设置为 -1，但这似乎只能禁用下拉菜单下的添加元素。

我也试过在下拉菜单中添加 'opacity: 1'，这似乎也没有任何改变。

// navbar css

* {
  margin: 0px;
}

:root {
  --bg: #242526;
  --bg-accent: #484a4d;
  --nav-size: 60px;
  --border: 1px solid #474a4d;
  --border-radius: 8px;
  --speed: 500ms;
  margin-top: 75px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
} 

a {
  /* color: #dadce1; */
  text-decoration: none;
}

.logo {
  color: #dadce1;
  margin: 0px;
  display: flex;
  align-items: center;
}

.navbar {
  height: var(--nav-size);
  background-color: var(--bg);
  padding: 0 1rem;
  border-bottom: var(--border);
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar-list {
  max-width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}

.nav-item {
  width: calc(var(--nav-size) * 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 25px;
}

.icon-button {
  --button-size: calc(var(--nav-size) * 0.5);
  width: var(--button-size);
  height: var(--button-size);
  /* background-color: #484a4d;  */
  border-radius: 50%;
  padding: 5px;
  margin: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dropdown {
  position: absolute;
  z-index: 1;
  top: 56px;
  width: 300px;
  transform: translateX(-35%);
  background-color: rgb(16, 85, 211);
  border: var(--border);
  border-radius: var(--border-radius);
  padding: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 1;
}

.menu-item {
  height: 50px;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  /* transition: background var(--speed);  */
  padding: 0.5rem;
}

 .menu-item:hover {
  background-color: #525357;
} 

.nav-profile-pic {
  max-width: 75px;
}

// review-list css

button, .sort-by {
  z-index: -1;
}

Answer 1

只看你的CSS，最简单的是：

将 z-index: 1000;（或任何需要的值）添加到 position: fixed; parent 元素 .navBar.
它的子元素将相应地执行 - 覆盖页面上的其他元素。

Z-index MDN Docs
并记住在 CSS 具有 positon 的元素上使用 z-index（: static; 除外）

移动导航在下拉菜单下方显示可点击元素

Mobile nav displaying clickable elements underneath dropdown

html

javascript

css

reactjs

material-ui