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

Question

I'm showing some images on the chart. They are showing fine but issue is when included the margin-left and margin-right to give some space to show the chart.

included css code:

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

js code: Below js code is used to show the images at a particular location on the chart. The below code works when the chart is occupied to 100% , but when included the above css code, the image positions are not shown at given timeframes..

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

Answer 1

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

Answer 2

#timeline {
  position: relative;
}

Then you will need to update

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