如何相对于图像定位此元素？

Question

如何将此热点元素相对于图像放置在左上角（0,0），同时将其保持在容器的中心？
我尝试了几件事，但它一直相对于容器定位，因为图像显示为要居中的块。但我希望按钮相对于图像而不是被阻挡的图像..

- 更新 -

如果我取消阻止图像，我可以使其正确定位，但这不会发生。

HTML

  <div class= "img-container">
    <img id ="img" src = "resources/images/androg.front.jpg">    
<button id="hotspot-button" class="btn btn-fab"></button>
</img>
  </div>

CSS

.img-container{
  position: relative;
  display: block;
  height: 100%;
  vertical-align: middle !important;
  margin-left: auto;
  margin-right: auto;
}
#img {
  height: 100%;
  //position: float;
  position: relative;
  display: block;
  vertical-align: middle !important;
  margin-left: auto;
  margin-right: auto;
}

#hotspot-button {
  position:absolute;
  top:0%;
  left:0%;
}

Answer 1

你快到了。您需要做的就是更新.img-container以包含此内容：

.img-container{
  display: table;
}

这会将#hotspot-button放在图像顶部，左上角为坐标0,0。

以下是JSFiddle的链接。

Answer 2

确定。我通过手动定位容器并使图像浮动和热点绝对来修复它。

.img-container{
  position: relative;
  display: block;
  height: 100%;
  //vertical-align: middle !important;
  //margin-left: auto;
  //margin-right: auto;
  left: 40%;
}

但这是一个黑客并不是真正的修复imo - 因为我发现大多数HTML5资源都说块/边缘方法是正确的中心方式。