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

【问题标题】：z-index with React Burger menu not working带有 React Burger 菜单的 z-index 不起作用
【发布时间】：2021-04-05 18:30:59
【问题描述】：

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

这是我的下拉内容的 CSS 类（用于设置汉堡菜单的样式）

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

【问题讨论】：

标签： javascript css reactjs hamburger-menu

【解决方案1】：

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

【讨论】：

我设置为10000和100，都没有解决问题。
@ianwt 你能提供你的代码的sn-p吗？

【解决方案2】：

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

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

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

【讨论】：