z-index 不能正常工作

Question

我在 3 个容器中设置 z-index 时遇到问题。

前两个用于网页菜单，第三个用于语言 select。我不知道为什么扩展菜单不包含语言 selection.

代码如下，谢谢指教！

HTML:

 <div id="menu">
      <div class="nabidka">
<nav id="navigation">
    <a class="menu_button" href="#footer_nav" onclick="toggleNav(); return false;">MENU</a>
    <ul id="navigation_list" role="navigation">
<li style="padding-left: 0;"><a href="/">HOME</a></li>
......
    </ul>
</nav>
      </div>

      <div id="lang">
language select...
      </div>


      </div>

CSS:

#navigation ul {
    display: none;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 0; 
    margin-top: 20px;
    z-index: 2;
}
#navigation ul.expanded {
    display: block;
    z-index: 2;
}
#navigation li {
display: block;
width: auto;
padding: 0;
z-index: 2;
}

  #lang {
  position: absolute;
  top: 50px;
  right: 5px;
  z-index: 1;
  }

Answer 1

您需要向所有具有 z-index 属性的元素添加 position 属性。尝试将 position: relative 添加到所有这些。

另请参阅此文档：z-index CSS | MDN

z-index 不能正常工作

z-index doesn't work properly

html

css

z-index