html - CSS 隐藏 :overflow not working with absolute position?

Question

我有一些圆圈 <div>在里面。我想隐藏这个 <div> 的溢出使用 overflow:hidden属性(property)。

这是结果:

如您所见，div 根本没有隐藏。但是，在删除 position:absolute 之后来自内部<div> ，它看起来像这样:

现在，<div>裁剪得当，但外面的 <div>现在是椭圆而不是圆。

我怎样才能得到一个内部裁剪得当的圆圈 <div> ？

我的代码:

.button-circle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  padding-bottom: 100%;
  background-image: url(http://placekitten.com/200/300);
  background-size: cover;
}
.button-circle div {
  width: 100%;
  position: absolute;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
}

<div class="button-circle">
  <div>
    <h3>Click me!</h3>
  </div>
</div>

Answer 1

将position: relative添加到.button-circle

.button-circle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  padding-bottom: 100%;
  background-image: url(http://placekitten.com/200/300);
  background-size: cover;
  position: relative;
}
.button-circle div {
  width: 100%;
  position: absolute;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
}

<div class="button-circle">
  <div>
    <h3>Click me!</h3>
  </div>
</div>