javascript - 当包含 margin-left 和 margin-right 时，图像不会显示在给定位置

Question

我在图表上展示了一些图片。它们显示正常，但问题是包含 margin-left 和 margin-right 以提供一些空间来显示图表。

包含的CSS代码:

#chart1 {
        margin: 0 auto;
        overflow : hidden;
        margin-left: 60px;
        margin-right: 60px;
    }

js代码:下面的js代码用于显示图表上特定位置的图像。当图表被占用到 100% 时，下面的代码可以工作，但是当包含上面的 css 代码时，图像位置不会在给定的时间范围内显示。

overlay.style.left = (overlayBounds.x / (timelineWidth / 100) ) + '%';

Answer 1

#timeline {
  position: relative;
}

那你就需要更新

.overlay {
  ...
  margin-top: -10px;
}