如何用HTML和CSS实现图片覆盖在盒子上方（附参考图）

原代码无法实现覆盖效果的核心问题是：图片和盒子为同级独立元素，仅靠float无法实现层叠定位，且未利用CSS定位属性控制层级与位置。

以下是修正后的代码，可实现参考图的覆盖效果：

HTML 结构 #

<section class="container">
  <div class="box">
    This is a box!This is a box!This is a box!This is a box!This is a box!This is a box!This is a box!
  </div>
  <img src="../pics/pexels-august-de-richelieu-4260325.jpg" class="img-cont">
</section>

CSS 样式 #

.container {
  position: relative; /* 作为绝对定位的参考容器 */
  margin: 0 25px;
}

.box {
  margin-right: 190px; /* 右侧留出图片空间 */
  padding: .25rem .75rem .75rem;
  background-color: #2a3047;
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.15);
  border-radius: 1rem;
}

.img-cont {
  position: absolute;
  right: 25px; /* 与容器左边距对齐 */
  top: -30px; /* 向上偏移实现顶部覆盖 */
  width: 50%;
  z-index: 1; /* 确保图片在盒子上方 */
}

关键实现要点 #

• 父容器.container设置position: relative，作为图片绝对定位的参考基准
• 图片使用position: absolute脱离文档流，实现与盒子的层叠布局
• z-index: 1确保图片层级高于盒子，避免被遮挡
• 通过top和right属性精准调整图片位置，匹配参考图的覆盖效果

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