z-index是否会被完全覆盖？overlay按钮点击无响应问题排查

一、"ORDER ONLINE"按钮无法触发addToOrder函数的原因及修复 #

1. 事件绑定错误 #

你在openNav里直接执行了addToOrder(mName, mID)并把返回值赋值给onclick，这会导致addToOrder在openNav执行时就立即调用，而非按钮点击时触发。需要改为绑定函数引用，用箭头函数包裹传递参数：

function openNav(mName, mID) {
  console.log('In Open Nav');
  document.getElementById('myNav').style.height = '100%';
  const menuItemOrderButton = document.getElementById('overlay-menuitem-order');
  // 改为箭头函数，点击按钮时才执行addToOrder
  menuItemOrderButton.onclick = () => addToOrder(mName, mID);
}

2. 父元素禁用指针事件 #

.overlay-menuitem设置了pointer-events: none，这会让该元素及其所有子元素都无法接收鼠标/触摸事件，按钮自然无法响应点击。需要移除这个属性：

.overlay-menuitem {
  position: relative;
  margin: auto;
  width: 100%;
  max-height: 70% !important;
  max-width: 400px;
  border: 0px solid #000;
  border-radius: 18px;
  background: #FFF;
  /* 移除pointer-events: none */
  z-index: -5 !important;
}

二、z-index!important未生效的原因及修复 #

你的z-index问题核心是堆叠上下文层级冲突：

1. .overlay是position: fixed，形成独立堆叠上下文，z-index为100。
2. .overlay-content作为它的子元素设置了z-index: -10，会让整个内容块处于.overlay背景层下方，子元素的z-index仅在父堆叠上下文内部生效，无法突破父层级。
3. .overlay-menuitem的z-index是-5，相对于.overlay-content的-10，依然处于父元素的堆叠层级内，无法显示在.overlay之上。

修复方案：移除.overlay-content和.overlay-menuitem的负z-index设置，让它们自然继承父元素的堆叠上下文：

.overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  /* 移除z-index: -10 !important; */
}

.overlay-menuitem {
  position: relative;
  margin: auto;
  width: 100%;
  max-height: 70% !important;
  max-width: 400px;
  border: 0px solid #000;
  border-radius: 18px;
  background: #FFF;
  /* 移除pointer-events: none; */
  /* 移除z-index: -5 !important; */
}

三、关于z-index是否会被完全覆盖的疑问 #

是的，存在这种情况：

• 若父元素创建了堆叠上下文（如设置position非static+z-index，或使用transform、opacity<1等属性），子元素的z-index仅在父堆叠上下文内部生效，无法突破到父元素层级之上。
• 当存在更高优先级的选择器（如内联样式、ID选择器）设置z-index且带!important时，会覆盖低优先级选择器的!important设置。
• 元素默认position: static时，z-index完全不生效，无论怎么设置都无效。

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