如何在div后方创建圆形背景？CSS卡片复刻问题求助

你的问题核心在于相对定位仅改变元素视觉位置，不会释放原布局空间，再加上.CardHeader使用了flex-direction: column，导致橙色背景块和图片上下排列，图片自然被挤到下方。下面是修正后的代码，实现橙色装饰块与图片叠加的预期效果：

修正后的HTML #

<div class="Card">
  <div class="CardHeader">
    <div class="HeaderBg">
      <img src="/imgs/desktop-solid.svg" width="100" height="100" alt="Image" />
    </div>
  </div>
  <div class="CardBody">
    <h2>Title</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </p>
  </div>
</div>

修正后的CSS #

.Card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 250px;
  height: 350px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}

.CardHeader {
  width: 100%;
  padding: 20px 0;
  display: flex;
  justify-content: center;
}

.HeaderBg {
  width: 150px;
  height: 150px;
  background-color: #ff9301;
  position: relative;
  left: -15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.CardHeader img {
  width: 100px;
  height: 100px;
}

.CardBody {
  padding: 0 20px;
  text-align: center;
}

.CardBody h2 {
  margin-top: 0;
}

.CardBody p {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

关键调整说明 #

• 将图片嵌套到橙色背景div内，通过flex布局让图片在背景块中居中，避免上下排列导致的挤出问题。
• 相对定位的橙色块仅调整自身位置，图片作为其子元素会跟随移动，不会脱离布局流。
• 给.Card添加overflow: hidden，防止橙色块左移后超出卡片边界（可根据实际需求选择是否保留）。
• 优化.CardBody的内边距和文本样式，让卡片视觉效果更贴合常见设计。

内容的提问来源于stack exchange，提问作者mitas1c