CSS在里面有图像的div角添加圆形贴纸

Question

我在 html 页面中有以下块：

* {
  margin: 0px; 
  padding: 0px; 
  box-sizing: border-box;
 }

 body, html {
  height: 100%;
 }

.container-form {
  width: 100%;  
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

.wrap-form {
  width: 500px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  padding: 42px 55px 45px 55px;
}

<div class="container-form">
  <div class="wrap-form">
    <form> ... </form>
  </div>
</div>

我想在右上角添加一个带有图像的圆形贴纸。

我以包装形式创建了以下 div：

.sticker {
  display: inline-block;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  overflow: hidden;
  position:absolute;
  top:10px;
  right:10px;
}
img {
  width: inherit;
  height: inherit;
  border-radius: inherit;
}
<div class="sticker">
  <img src="image.jpg" alt="alt" />
</div>

但是图像超出了形式......你知道为什么吗？

编辑：在此处查看代码：https : //codepen.io/Old_Krupnik/pen/qBENRWL

Answer 1

只需要向您的 .wrap-form 类添加一个相对位置属性，如下所示：

.wrap-form {
  width: 500px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  padding: 42px 55px 45px 55px;
  position: relative;
}


.sticker {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  overflow: hidden;
  position:absolute;
  top:10px;
  right:10px;
}