image is not shown on the given location when used css attributes to give some margin space

Question

I'm showing some images on the chart. The position to display the images are not showing correctly when included margin-left and margin-right properties to the chart.

Please find the demo : https://plnkr.co/edit/vr7R9KsvC2GuS7kfoIBp?p=preview css code:

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

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

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

Below line is used to calcuate and display the image at particular location.

overlay.style.left = (overlayBounds.x / (timelineWidth / 100) ) + '%';
//overlay.style.left = ( overlayBounds.x / timelineWidth ) * 100 + '%'; //tried, but not successful

Answer 1

Sorry for the late response. I have noticed that your div element 'chart2' needs to have the position: relative. Also the <img src="http://findicons.com/files/icons/512/star_wars/16/clone_old.png" class="overlay" style="top: 250px; left: 39.1057%;">, the top: 250px needs to be changed to 5px or something small.

Take a look at css positioning or mozilla. Also in the chrome developer tools, you can inspect the dom elements to see where they are at and change the css rules to better understand the css.