要使覆盖覆盖整个视口，请执行以下操作

• 不使用z-index：0;对于其他元素
• 将覆盖层放置在元素的外部，即：在体内

这是第一个解决方案：

* {margin: 0; box-sizing: border-box;}

.page {
  background-color: #333;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
}

.region {
  display: flex;
  flex-wrap: nowrap;
  padding: 10px 0px;
  position: relative;
  /* z-index: 0;         /* REMOVE! */
  gap: 20px;

  &:first-of-type {
    padding-top: 0px;
    height: 130px;
  }

  &:nth-of-type(2) {
    height: calc(100vh - 245px);
  }

  &:last-of-type {
    padding-bottom: 0px;

  }
}

.zone {
  display: flex;
  flex-direction: column;
  flex: 1;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 10px;
  padding: 0px 10px;
  background-color: #0000ff33;

  &:first-of-type {
    padding-left: 20px;
  }

  &:last-of-type {
    padding-right: 20px;
  }
}

#overlay {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1000;
   background: #ffffff66;
}

个字符

.page {
    background-color: #333;
    height: 100vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    position: relative; /* Add this line to create a new stacking context */
    z-index: 1; /* Add this line to set the z-index of the new stacking context */
}

字符串
/* CSS的其余部分保持不变 */
覆盖层未覆盖页脚flex-box及其内容的问题是由于CSS中使用的z-index属性和position属性创建的堆栈上下文造成的。
您可以通过添加位置来完成此操作：相对; z指数：1;到.page类。这将为整个页面创建一个新的堆栈上下文，并使用z-index覆盖：1000将出现在这个新的堆叠上下文中的所有元素的顶部，包括页脚弹性框。

将您的“.region”样式更新为此样式（以及“&：last-of-type”）

.region {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 10px 0px;
  position: relative;
  z-index: 1;
  gap: 20px;

  &:first-of-type {
    padding-top: 0px;
    height: 130px;
  }

  &:nth-of-type(2) {
    height: calc(100vh - 245px);
  }

  &:last-of-type {
    padding-bottom: 0px;
    z-index: 0;
  }
}

字符串