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

Question

我正在尝试使用 react-burger-menu。 但是，当菜单弹出时，我的搜索按钮仍然可见。 我尝试了 1、100 和 10000 的 z-index 值

这是我的下拉内容的 CSS class （其中 styles 汉堡菜单）

.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

尝试将您的 z-index 设置为比 1 高得多的数字

Answer 2

在这里你可以学习如何使用 z-index

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

我的建议是将汉堡菜单放在 body 元素的末尾。