I have created a mobile nav following this tutorial on youtube https://www.youtube.com/watch?v=IF6k0uZuypA.

The nav dropdown as show in 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.

I am using React, MUI material icons https://mui.com/components/material-icons/ for the 'add' icon and MUI select for the sort and order by https://mui.com/components/selects/.

I have switched the add icon from MUI and replaced it with Fontawesome, but the issue still appears.

I have also tried setting the Z-index of the dropdown to 1 and the Z-index of the add icon underneath to -1, but this only seems to disable the add element under the dropdown.

I have also tried adding an 'opacity: 1' to the dropdown, this does not seem to change anything either.

// 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;
}

CodePudding user response：

By just seeing your CSS, the easiest would be:

add z-index: 1000; (or any needed value) to the position: fixed; parent element .navBar.
Its child elements will perform accordingly - overlaying other elements on the page.

Z-index MDN Docs
and keep in mind to use z-index on elements with CSS having positon (other than : static;)