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

Answer 2

根据 https://www.w3schools.com/cssref/pr_class_position.asp，

position: absolute：元素相对于其第一个定位(非静态(祖先元素定位

默认情况下，您的表单和任何默认元素都已设置position: static。因此，如果您希望相对于表单定位贴纸，则需要将属性postion: relative添加到该表单元素(当然position: absolute添加到贴纸(。

Answer 3

为了使子元素保持在父元素的约束范围内，其父元素需要将其位置设置为相对，将子元素设置为绝对。请参阅下面的代码：

.parent {
background: red;
height: 200px;
width: 200px;

/* The below is important */
position: relative;
}
.child {
background: blue;

/* The below is important */
position: absolute;
bottom: 15px;
right: 15px;
}

<div class="parent">
<button class="child">Foo</button>
</div>