Html 试图将一个圆形div与另一个div顶部的背景图像叠加时出现的滚动条

我想将一个圆形div覆盖在另一个div的顶部，以实现如下效果：

我已经能够通过下面的代码实现这种外观，但是，您可以在圆形div中滚动，这样可以移动图像：

我的目标是消除滚动条的出现

以下是我正在使用的HTML和CSS：

HTML

---

要防止在元素上滚动，请添加：

#main-picture {
    overflow: hidden
}

---

Froy T建议使用绝对位置是正确的。我能够用它达到预期的效果，如下所示：

---

这就可以了…

如果你我这样做，它就不会达到我想要的效果，因为我正在使用overflow：overlayUnless我遗漏了什么，overlay不会为你做任何事情。Overlay是一个仅由webkit浏览器支持的值，它模仿自动。当我将其更改为“隐藏”时，效果对我来说是相同的。这两种溢出设置之间有什么不同？我假设您仍然希望图像周围的圆圈显示在矩形上方，如果是这样，则溢出：隐藏将不起作用。我建议绝对显示div并使用。这很有帮助！我更新了提琴，并留下了一个工作版本作为这个问题的答案。你的问题表明你想去掉滚动条，而不是在正方形上加上边框圈。我回答了这个问题，结果被否决了。好啊

#other-box {
  background-color: #fafafa;
  border: black 2px solid;
  margin: auto;
  padding: 2.5%;
  padding-top: 100px;
  width: 300px;
}

#main-picture {
  background-color: #fafafa;
  border-radius: 100%;
  border: 2px solid black;
  margin: auto;
  overflow: overlay;
  padding: 10px;
  height: 100px;
  width: 100px;
  margin-bottom: -50px;
}
#main-picture img {
  border-radius: 100%;
  height: 100%;
  width: 100%;
}

#main-picture {
    overflow: hidden
}

  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 50px;

#main-picture {
   overflow: none;
}