css - z-index 似乎不起作用

Question

在我的网站上，我建立了一个带有链接的页面: https://weerpagina.warnez.com/links/ 一切顺利，直到我添加了子菜单(例如，参见“网络摄像头”)，当您将鼠标悬停在菜单项上时，子菜单会显示，但一部分隐藏在页脚后面。 结构(带 z-indexes，仅在我的开发环境中)如下:

<div id="wrapper"> --> z-index:1;
   <header>...</header> --> z-index:100;
  <div id="main">...</div> --> z-index:50
  <footer>...</footer> --> z-index: 1
</div>

子菜单(来自“main”)仍然隐藏在页脚后面。

我尝试添加到“main”、“overflow:visible”并且它起作用了，除了它导致我的管理区域中的一些表在 X 方向溢出，这是一种不需要的行为。然后我尝试了 overflow-x:scroll 和 overflow-y:visible，但显然当你设置 overflow-y:visible 时，overflow-x 会自动自动。所以这也行不通。 (参见 overflow-y:visible not working when overflow-x:hidden is present)。无论如何，我更喜欢通过 z-index 来解决它。

非常感谢任何帮助!

亲切的问候，

巴特

Answer 1

我认为“#main”有“overflow:auto”，并且将菜单保留在里面。

您应该忽略管理区域，或者您可以在“正文”处应用一些全局类名来区分管理和前端。

然后保留管理页面的溢出设置并使#main overflow:visible at the frontend.