Question

我正在尝试使用画布获取图像的X和Y的坐标，问题是我想将图像放在画布后面，这样我就可以在此图像的顶部使用带有画布的js ＆＃34;我不想在画布上绘制此图像，因此我可以使用后端编程轻松更改它＆＃34;

<style>
  .map_image{width:80%; position:relative;}
  #map_canvas{width:100%; height:100%; position:static; top:0px; right:0px;}
  .map_img{width:100%; height:100%;}
</style>

<div class="map_image">
  <canvas id="map_canvas"></canvas>
  <img src="images/map.jpg" class="map_img" />
</div>

使用此代码，画布显示在图像上，我使用了z-index，但它并没有与我合作。

我希望你能清楚，如果有任何其他方式，如果你帮助了我，我会很高兴。

Answer 1

z-index适用于定位元素，即具有位置的元素（绝对，固定，相对）。

http://jsfiddle.net/66Ryg/

Answer 2

我认为你的位置问题：静态画布，尝试将其更改为相对并尝试再次应用z-index，你的图像将在画布后面。

或者您可以尝试对画布应用绝对位置。检查此处的代码

.map_image{width:80%; position:relative;}
#map_canvas{width:100%; height:100%; position:absolute; top:0px; right:0px;}
.map_img{width:100%;height:100%;}

Canvas位于<img/>标记之上

2 个答案: