如何实现图片超出div边框且位于div文本下方？

我来给你一步步拆解怎么实现这个效果：

核心思路是利用**CSS定位和堆叠层级（z-index）**控制元素显示顺序，同时通过绝对定位让图片居中并超出div边框，最终实现文本在图片上方、图片重叠div边框的效果。

1. HTML基础结构 #

先搭建最基础的结构，蓝色div容器内包含文本和红色方块（这里用div模拟图片，换成真实<img>标签逻辑完全一致）：

<div class="blue-box">
  <p>这里是div内的文本内容，会显示在红色图片的上方</p>
  <div class="red-square"></div>
</div>

2. CSS样式实现 #

/* 蓝色div容器 */
.blue-box {
  position: relative; /* 为内部绝对定位元素提供定位参考 */
  width: 300px;
  padding: 20px;
  border: 3px solid blue; /* 蓝色边框 */
  background-color: #f0f8ff; /* 浅蓝背景，方便直观查看效果 */
}

/* 红色方块（模拟图片） */
.red-square {
  position: absolute; /* 脱离文档流，相对于父级div定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 实现元素完美居中 */
  width: 340px; /* 宽度比div内容区大（300+20*2），刚好覆盖边框 */
  height: 340px;
  background-color: red; /* 红色背景，换成真实图片只需替换为src属性即可 */
  z-index: -1; /* 将方块置于文本下方，负z-index会低于父级默认堆叠层级 */
}

/* 可选优化：增强文本可读性 */
.blue-box p {
  position: relative;
  z-index: 1; /* 确保文本层级高于图片 */
  margin: 0;
  padding: 10px;
  background-color: rgba(255,255,255,0.8); /* 半透明白色背景，避免图片透过文本显示 */
}

关键细节解释 #

• position: relative：给父级div设置相对定位，是为了让内部的绝对定位元素（红色方块）以它为基准定位，而不是整个页面。
• transform: translate(-50%, -50%)：这是实现元素精准居中的经典写法，不管元素尺寸多大，都能自动居中到父级容器的中心点。
• z-index: -1：把红色方块的堆叠层级设为负数，让它自动跑到父级div的内容（文本）下方，同时因为父级是相对定位，方块不会跑到div外部的其他元素下方。
• 图片尺寸大于div内容区：通过设置宽度比div的内容宽度（width+左右padding）大，让方块超出div的内容区域，从而重叠到蓝色边框上，达到你要的效果。

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