带有 React Burger 菜单的 z-index 不起作用

Question

I am attempting to use a react-burger-menu. However, my search button is still visible when the menu pops up. I have tried a z-index value of 1, 100, and 10000

Here is the CSS class for my dropdown content (which styles the burger menu)

.dropdown-content {                                                                                                                                                                                                                                                             
  display: none;                                                                                                                                                                                                                                                                
  position: absolute;                                                                                                                                                                                                                                                           
  background-color: #FCFDFD;                                                                                                                                                                                                                                                    
  min-width: 160px;                                                                                                                                                                                                                                                             
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);                                                                                                                                                                                                                                 
  z-index: 1;                                                                                                                                                                                                                                                                   
  width: 250px;                                                                                                                                                                                                                                                                 
  right: 0;                                                                                                                                                                                                                                                                     
  top: 5;                                                                                                                                                                                                                                                                       
  border-radius: 2px;                                                                                                                                                                                                                                                           
}                                                                                                                                                                                                                                                                               

Answer 1

Try setting your z-index to a much higher number than 1

Answer 2

here's you could learn how to use z-index

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

my recommendation is to put the hamburger menu to the end of the body element.