Как сделать так, чтобы выпадающий список навигационной панели располагался над всеми элементами?

Question

Я пытаюсь создать раскрывающееся меню панели навигации с помощью материального дизайна. Работает нормально. Единственная проблема, с которой я сталкиваюсь, это то, что все остальные элементы плавают над раскрывающимся списком.

Я хочу, чтобы раскрывающийся список плавал над всеми остальными элементы. Я использовал "z-index", но он не работает.

element.style {
    transform: none;
    transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.makeStyles-dropdownMenu-81 {
    z-index: 10000;
    position: absolute;
    box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
}

.makeStyles-root-80 {
    width: 10%;
    max-width: 360px;
    background-color: #fff;
}

.MuiList-padding {
    padding-top: 8px;
    padding-bottom: 8px;
}

.MuiList-root {
    margin: 0;
    padding: 0;
    position: relative;
    list-style: none;
}

nav {
   display: block;
}

<nav class="MuiList-root makeStyles-root-80 makeStyles-dropdownMenu-81 MuiList-padding" aria-label="mailbox folders" style="transform: none; transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;">
  <div class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false">
    <div class="MuiListItemText-root">
      <span class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock">Inbox</span>
    </div>
    <span class="MuiTouchRipple-root"></span>
  </div>
  
  <hr class="MuiDivider-root">
  
  <div class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-divider MuiListItem-button" tabindex="0" role="button" aria-disabled="false">
    <div class="MuiListItemText-root">
      <span class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock">Drafts</span>
    </div>
    <span class="MuiTouchRipple-root"></span>
  </div>
  
  <div class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false">
    <div class="MuiListItemText-root">
      <span class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock">Trash</span>
    </div>
    <span class="MuiTouchRipple-root"></span>
  </div>
  
  <hr class="MuiDivider-root MuiDivider-light">
  
  <div class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false">
    <div class="MuiListItemText-root">
      <span class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock">Spam</span>
    </div>
    <span class="MuiTouchRipple-root"></span>
  </div>
</nav>

Ссылка: https://surroundinganchovy.htmlpasta.com/

Будет полезно, если я получу предложение.

Answer 1

Все, что вам нужно сделать, это применить position: relative; к родительскому элементу (либо заголовку, либо div, который используется для элемента навигации), чтобы z-индекс потомков / потомков в этом родительском элементе был фактически применено.

Answer 2

Заголовок должен иметь относительную позицию.

.MuiAppBar-positionStatic {
    position: relative;
} 

или

header {
    position: relative;
}

Answer 3

Решение состоит в том, чтобы добавить z-index к родительскому компоненту, который является родственником компонента диаграммы. В данном случае это <header>. Итак, в JSX вы можете:

<header style={{ position: "absolute", zIndex: 100 }}>
  /** -- snip -- **/
</header>

Или вы можете добавить класс, который сделает это за вас. Это нужно сделать так, потому что z-index влияет только на своих братьев и сестер. Таким образом, только одноуровневые div могут иметь z-index, которые перекрывают друг друга.

Это очень распространенная проблема с модальными окнами et c. Z-index наследуется от любых родителей выше div; Это известно как контекст наложения: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context