如何使用z-index与相对定位实现图片的Div文字覆盖

嘿，我来帮你搞定这个文字覆盖层的问题！你的思路是对的，但用负margin的方式容易出布局问题，而且没利用好定位的核心特性。问题的关键在于：当你给元素设置position: absolute时，如果父级元素没有设置position: relative，绝对定位的元素会相对于整个页面来定位，自然就会超出父级div的宽度啦。

我给你调整了代码，能完美实现文字覆盖在图片上的效果：

修改后的CSS代码 #

.box { 
  width: 600px; 
  margin: 120px auto 0 auto;
  overflow: hidden; /* 清除浮动，避免父容器高度塌陷 */
}
.img-box-li { 
  float: right; 
  width: 50%;
  position: relative; /* 核心！让子元素的绝对定位以它为参考容器 */
}
.cover-title { 
  position: absolute; /* 脱离文档流，直接覆盖在图片上方 */
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%; /* 和图片容器高度保持一致 */
  background-color: rgba(0, 0, 0, 0.5); /* 修正了你超出范围的RGB值，改成合理的深色半透明 */
  z-index: 1; /* 确保覆盖层在图片上方 */
  display: flex; /* 可选：让文字垂直水平居中 */
  align-items: center;
  justify-content: center;
}
.cover-title p {
  color: white; /* 可选：让文字更显眼 */
  margin: 0;
}
.img { 
  width: 100%; 
  height: 200px;
}
.img img { 
  width: 100%; 
  height: 100%;
  object-fit: cover; /* 可选：保持图片比例，避免拉伸变形 */
}

修改后的HTML代码 #

<div class="box">
  <div class="img-box-li">
    <div class="cover-title">
      <p>THIS IS TITLE</p>
    </div>
    <div class="img">
      <img src="img.jpg">
    </div>
  </div>
  <div class="img-box-li">
    <div class="cover-title">
      <p>THIS IS TITLE</p>
    </div>
    <div class="img">
      <img src="img.jpg">
    </div>
  </div>
</div>

关键修改点说明 #

• 给.img-box-li添加position: relative：这是绝对定位的核心参考，让.cover-title的定位完全限制在父容器内部，不会乱跑或超出宽度。
• 把.cover-title改成position: absolute：脱离文档流后，它不会占据额外空间，直接覆盖在图片上方，设置width:100%和height:100%就和父容器完全贴合。
• 修正了background-color的RGB值：你原来写的rgba(455, 556, 852, 0.5)数值超出了0-255的范围，改成深色半透明后，文字会更清晰。
• 增加了文字居中样式（可选）：用flex布局让标题在覆盖层里垂直水平居中，视觉效果更协调。
• 清除浮动：给.box加overflow: hidden，解决子元素浮动导致的父容器高度塌陷问题。

这样调整后，覆盖层就会完美贴合图片，再也不会超出父级div的宽度啦！

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