修改代码后无法对id为Main的元素进行输入交互，排查不出CSS/JS问题

问题根因 #

#Menu元素设置了position: fixed、width: 100%、height: 100%，作为全屏固定层默认覆盖在常规流布局的#Main元素上方，即使视觉上没有背景色，也会拦截所有点击、输入等交互事件，导致下方#Main区域的输入框无法操作。

修复方案 #

以下两种方案任选一种即可：

• 方案1：调整元素层级，让#Main响应交互优先
  给#Main的CSS添加z-index: 2属性，高于#modal设置的z-index:1即可：

  #Main {
    margin-left: 25%;
    transition: .25s; 
    padding: 20px;
    position: relative;
    z-index: 2; /* 新增该行 */
  }
  

• 方案2：动态控制菜单层的交互状态，避免闲置时拦截事件
  修改JS的resize函数，菜单收起时关闭#Menu的交互响应，展开时恢复：

  function resize() {
    if (check == true) {
          menuBar.style.width = "0%";
          menuBar.style.pointerEvents = "none"; // 新增：收起时不响应交互
          num = 0;
          check = false;
        } else {
          if (window.innerWidth > 600) {
            menuBar.style.width = "100%";
            menuBar.style.pointerEvents = "auto"; // 新增：展开时恢复交互
            num = 1;
          } else if (window.innerWidth <= 600) {
            menuBar.style.width = "100%";
            menuBar.style.pointerEvents = "auto"; // 新增：展开时恢复交互
            num = 2;
          }
          check = true;
        }  
        checkChange(num);
  };
  

内容的提问来源于stack exchange，提问作者니로우