Sticky侧边栏遮挡Navbar下拉菜单，如何让下拉菜单覆盖侧边栏？

问题核心是**堆叠层级（z-index）**冲突：sticky定位的侧边栏会创建独立堆叠上下文，默认堆叠层级高于导航栏的下拉菜单，导致下拉菜单被遮挡无法点击。

直接调整z-index属性即可解决，具体操作如下：

修改CSS代码 #

给导航栏（.navbar）设置更高的z-index值，让导航栏及其子元素（下拉菜单）的堆叠层级超过侧边栏：

.parent {
  display: grid;
  grid-template-areas: "navbar navbar" "sidebar content";
  position: relative;
}

.navbar {
  height: 50px;
  background: #0f0;
  grid-area: navbar;
  position: sticky;
  top: 0;
  z-index: 100; /* 添加此行，提升导航栏整体堆叠层级 */
}

.menu {
  display: none;
  width: 300px;
  height: 300px;
  background: #00f;
  position: absolute;
}

.visibile {
    display: block !important;
}

.sidebar {
/*   width: 200px; */
  height: 100px;
  background: #000;
  grid-area: sidebar;
  position: sticky;
  top: 50px;
}

.content {
  min-height: 1000px;
  background-image: linear-gradient(red,orange,yellow,green,blue,indigo,violet);
  grid-area: content;
}

原理说明 #

• Sticky定位元素会自动生成堆叠上下文，页面中后渲染的sticky元素（侧边栏在导航栏之后）默认堆叠层级更高。
• 给导航栏设置z-index: 100后，导航栏及其内部的下拉菜单会处于更高的堆叠层级，就能覆盖侧边栏，点击事件可正常触发。

内容的提问来源于stack exchange，提问作者Thomas Mueller