如何在图片上创建透明文本框？CSS定位异常求助

你的核心问题是所有图片都用了position: absolute——这个属性会让元素脱离文档流，导致它们的父容器没有实际高度，同时这些图片的定位上下文会向上找最近的position: relative元素（也就是#masthead），所以你后续添加的文本框也会以#masthead为基准定位，自然跑到了顶部区域。

修正方案 #

1. 调整HTML结构

给每张图片套一个独立的父容器，把文本框放在对应容器内：

<div class="image-wrap">
  <img id="montSaintAbbeyIMG" src="你的图片地址">
  <div class="img-text">Mont Saint Abbey 描述文本</div>
</div>
<div class="image-wrap">
  <img id="eileanDonanIMG" src="你的图片地址">
  <div class="img-text">Eilean Donan 描述文本</div>
</div>
<div class="image-wrap">
  <img id="neuschwansteinIMG" src="你的图片地址">
  <div class="img-text">Neuschwanstein 描述文本</div>
</div>

2. 修改CSS样式

/* 图片容器：设置定位上下文，实现并排 */
.image-wrap {
  position: relative; /* 关键：让内部绝对定位元素以它为基准 */
  width: 320px; /* 和你的图片宽度匹配 */
  float: left;
  margin: 20px; /* 保留原有的间距 */
}

/* 图片恢复默认定位，让容器能被撑开 */
.image-wrap img {
  width: 100%;
  display: block; /* 去掉图片默认的行内间距 */
}

/* 底部透明文本框 */
.img-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.4);
  color: #fff;
  padding: 10px 5px;
}

/* 移除原来的图片绝对定位样式 */
#montSaintAbbeyIMG, #eileanDonanIMG, #neuschwansteinIMG {
  position: static;
  top: auto;
  left: auto;
  right: auto;
}

关键要点 #

• 绝对定位元素的参考是最近的非static定位父元素，所以必须给图片容器加position: relative
• 不要用position: absolute做布局排列（比如排图片），这会破坏文档流，导致容器塌陷
• 如果不想手动设置容器宽度，可以用display: inline-block替代float: left，让容器随图片宽度自适应

内容的提问来源于stack exchange，提问作者justin.morton