当另一个div位于图表上时，保持highcharts图例响应

是通过以下步骤实现的：

确保图表和div元素都位于同一个父容器内，例如一个包含它们的div容器。
使用CSS的定位属性（例如position: relative;）确保图表和div元素可以相对于父容器进行定位。
使用CSS的z-index属性（例如z-index: 1;）将div元素的层级设置为高于图表的层级，以确保div元素覆盖在图表上方。
监听div元素的位置变化事件（例如resize事件）或者使用定时器定期检测div元素的位置。
当div元素的位置发生变化时，通过Highcharts的API方法（例如chart.update()）更新图表的位置和大小。
如果需要保持图例响应，可以使用Highcharts的API方法（例如chart.legend.update()）更新图例的位置和大小，以适应新的图表位置。

以下是一个示例代码：

HTML:

<div id="container">
  <div id="overlay"></div>
</div>

CSS:

#container {
  position: relative;
  width: 500px;
  height: 300px;
}

#overlay {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

JavaScript:

// 创建图表
var chart = Highcharts.chart('container', {
  // 图表配置
  // ...
});

// 监听div元素的位置变化事件或者定时器定期检测div元素的位置
function checkOverlayPosition() {
  // 获取div元素的位置信息
  var overlay = document.getElementById('overlay');
  var overlayRect = overlay.getBoundingClientRect();

  // 更新图表的位置和大小
  chart.update({
    chart: {
      marginLeft: overlayRect.left + 'px',
      marginTop: overlayRect.top + 'px',
      width: overlayRect.width + 'px',
      height: overlayRect.height + 'px'
    }
  });

  // 更新图例的位置和大小
  chart.legend.update({
    x: overlayRect.left + 'px',
    y: overlayRect.top + 'px',
    width: overlayRect.width + 'px',
    height: overlayRect.height + 'px'
  });
}

// 监听div元素的位置变化事件或者定时器定期检测div元素的位置
window.addEventListener('resize', checkOverlayPosition);

请注意，以上示例代码中的Highcharts是一个流行的前端图表库，用于创建和操作各种类型的图表。在实际应用中，您可以根据自己的需求选择适合的图表库和相应的API方法来实现相同的效果。