在css中重叠元素而不使用网格



如何在不使用网格的情况下在CSS中创建这种效果(请参见片段中的图像(。我在想我是否可以通过定位或其他方式达到同样的效果。提前感谢!

<html>
<body>
<img src="https://i.stack.imgur.com/lDNov.png" style="width:100%">
</body>
</html>

.parent {
width: 200px;
height: 200px;
border: 1px solid green;
position: relative;
}
.child {
position: absolute;
top: -10px;
left: -10px;
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
}
<div class="parent">
<div class="child">
<img src="https://blog.prezi.com/wp-content/uploads/2019/03/joshua-earle-157231-unsplash-1024x683.jpg" />
</div>
</div>

最新更新