CSS隐藏：溢出不能使用绝对位置？

Question

我的圈子里面有一些<div>。 我想使用<div>属性隐藏此overflow:hidden的溢出。

结果如下：

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

现在，<div>被正确裁剪，但外<div>现在是椭圆而不是圆。

如何在内部<div>正确裁剪的情况下使用圆圈？

我的代码：

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

根据您是否想要对内部<div>进行绝对定位，有两种解决方案可以解决您的问题。

没有position:abolute

如果您希望position:abolute上的.button-circle div无法使用，则需要将float:left;添加到该选择器并调整.button-circle的填充：< / p>

.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: 80%;
  background-image: url(http://placekitten.com/200/300);
  background-size: cover;
}
.button-circle div {
  width: 100%;
  float: left;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
}

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

（另见this Fiddle）

使用position:abolute

如果您希望它与position:abolute上的.button-circle div一起使用，则需要将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>

（另见this Fiddle）