html - 尝试在另一个 div 顶部覆盖带有背景图像的圆形 div 时出现滚动条

Question

我想将一个圆形 div 叠加在另一个之上，以获得此处显示的效果:

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

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

这是我使用的 HTML 和 CSS: https://jsfiddle.net/nLk7gqjd/

HTML

<div id="main-picture">
  <img src="https://www.w3schools.com/HTML/img_girl.jpg">
</div>
<div id="other-box">
</div>

CSS

#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%;
}

Answer 1

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

#main-picture {
    overflow: hidden
}