javascript - 如何使用 HTML 和 CSS 修复图像上的覆盖

Question

我一直在研究标记图像的代码。我在代码中遇到的问题是，当我开始标记图像时，图像上会出现一个叠加层，但叠加层的位置并不完全位于图像之上。

我尝试将位置设置为相对和绝对，但仍然出现问题。

我在下面附上了Jfiddle：

jsfiddle.net

如果您看到代码，则图像存在于 imgarea 中，并且 CSS 属性为：

 .imagearea {
    display: flex;
    flex-direction: column;
    float: left;
    width: 35%;
    position: absolute;
  }

在 image-select-area -overlay 中：

 .select-areas-overlay {
  background-color: #000;
  overflow: hidden;
  position: absolute;
  }

下图显示了我面临的问题

如果您看到图片，则叠加层（模糊叠加层）并不完全位于图像上方，而且它会将图像置于屏幕的最左侧。

有人可以帮我解决这个问题，以修复图像的这个位置及其上的叠加层。