CSS配置SVG波浪装饰时遮挡div内部内容的问题排查

SVG遮挡div内容的核心原因是层级设置错误：
波浪装饰容器用了position: absolute绝对定位，脱离了正常文档流，默认堆叠层级比后方静态定位（默认position: static）的.Upper-half-content内容区更高，直接覆盖在了内容上方。
另外你给SVG设置的height: 266px和SVG标签自带的viewBox="0 0 1200 120"比例不匹配，会导致SVG拉伸后占据顶部266px高度，进一步扩大遮挡范围。

• 调整装饰层与内容层的堆叠顺序：
  给波浪装饰容器添加z-index，把它放到父容器的层级最底部，避免覆盖正常内容，同时设置指针穿透避免拦截交互：

  .custom-shape-divider-top-1655888002 {
    z-index: 0;
    pointer-events: none;
  }
  

  给内容容器设置相对定位和更高的z-index，保证内容永远在装饰层上方：

  .Upper-half-content {
    position: relative;
    z-index: 1;
  }
  

• 核对SVG高度参数：
  当前手动设置的SVG高度266px和生成工具导出的原始viewBox比例不符，建议使用波浪生成工具给出的原始高度值，不要随意修改，避免SVG拉伸变形、遮挡过多区域。
• 属性兼容检查：
  如果是在原生HTML项目中写这段代码，把所有标签里的className属性替换为class。className是React/JSX语法的专属属性，原生HTML不识别，会导致CSS样式匹配失效引发布局异常。

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