CSS-在图像外侧的4个角上显示信息

Question

我有一个加载到背景图像中的指针图像，我希望在指针图像的四个角附近显示一些文本。

例如，指针图像是这样的-> pointer image

代码是这样的

  <section>
    <div id="panzoom" style="text-align: center;">
      <img src="css/dist/img/photo4.jpg" width="2000" height="1320" />
    </div>
    <div id="draggable" style="width: 150px; height: 150px; background-color: grey; cursor: move;">
        <div class="count"></div>
    </div>
  </section>

背景图片具有jQuery panzoom，灰色框是可拖动的jQuery。我希望在四边的灰色框内或框外显示信息。像这样的output that I wish to have

我可以正常显示1,2,3,4或5,6,7,8。但是我怎么能做到？

Answer 1

我想您希望<div class="count">放在角落。

在这种情况下，您希望将position: relative;赋予父元素（ID可拖动的div），并将position: absolute; top: 0; right: 0;赋予右上角。