时间戳

首页 > 解决方案 > css中重叠元素而不使用网格

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

问题描述

如何在不使用网格的情况下在 CSS 中创建这种效果（参见片段中的图像）。我在想我是否可以使用定位或其他方式达到相同的效果。提前致谢！

<html>

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

标签： htmlcss

解决方案

.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>

推荐阅读