clip-path多边形元素hover重叠时z-index设置失效问题

• 存在CSS语法错误：.banner规则中bottom 0、.overlayright规则中top 0缺少冒号，导致对应属性未被浏览器识别，定位逻辑异常，间接影响堆叠层级判断。
• 初始z-index设置与DOM顺序耦合：初始.overlayrightz-index为2、.overlayleft为1，视觉重叠区域的交互触发逻辑符合预期，但语法错误导致hover时的z-index变更看起来未生效。

1. 修复所有CSS语法错误，补全缺失的属性冒号。
2. 添加全局边距重置规则，清除浏览器默认边距，避免banner定位偏移。
3. 可选添加兄弟选择器规则，确保hover右侧元素时左侧元素层级被压低，彻底避免DOM顺序导致的同层级覆盖问题。

CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.banner {
  position: relative;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 700px;
}

.overlayleft {
  position: absolute;
  z-index: 1;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  clip-path: polygon(0 0, 75% 0, 100% 100%, 0% 100%);
  background: rgba(0,0,0,1);
  transition: .5s ease;
}

.overlayright {
  position: absolute;
  z-index: 2;
  bottom: 0;
  top: 0;
  left: 50%;
  right: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);
  background: rgba(0,0,0,0.6);
  transition: .5s ease;
}

.overlayleft:hover {
  z-index: 4;
  width: 100%;
}

.overlayright:hover {
  z-index: 4;
  width: 100%;
  left: 0;
}

/* 可选添加，确保hover右侧时左侧层级更低 */
.overlayright:hover ~ .overlayleft {
  z-index: 1;
}

HTML #

<!DOCTYPE html>
<html>
  <body>
    <div class="banner">
      <div class="overlayright"></div>  
      <div class="overlayleft"></div>
    </div>
  </body>
</html>

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