当使用css属性给出一些边距空间时，图像不会显示在给定的位置上 [英] image is not shown on the given location when used css attributes to give some margin space

问题描述

我在图表上显示了一些图像。包含图表的保证金余额和保证金 - 右侧属性时，显示图像的位置无法正确显示。

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.

请查找演示： https://plnkr.co/edit/vr7R9KsvC2GuS7kfoIBp?p=preview
css code：

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;
}

下面这行用于计算和显示特定位置的图像。 p>

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

推荐答案

响应。
我注意到你的div元素'chart2'需要有位置：relative 。还有< img src =http://findicons.com/files/icons/512/star_wars/16/clone_old.pngclass =overlaystyle =top：250px; left： 39.1057％;> ， top：250px 需要更改为5px或更小。

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.

查看 css定位或者 mozilla 。
在chrome开发人员工具中，您还可以检查dom元素以查看其位置，并更改css规则以更好地理解css。

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.

这篇关于当使用css属性给出一些边距空间时，图像不会显示在给定的位置上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！