Chrome浏览器CSS图片叠加文字布局异常问题排查求助

这大概率是Chrome对绝对定位元素的父级上下文处理逻辑和IE11、Firefox不一致导致的——绝对定位元素的定位基准是最近的已定位父元素（也就是设置了position: relative/absolute/fixed/sticky的父元素），如果父级没有设置任何定位属性，Chrome会直接把整个视口当作定位基准，而IE11和Firefox在这种场景下可能有不同的 fallback 处理，这就导致本该在图片下方的文字直接跑到了页面底部。

结合你给出的.size类代码，我推测你的DOM结构大概是图片和叠加文字都放在.size容器里，但.size没有设置position: relative，这就是问题的核心！

快速修复方案 #

给.size容器添加position: relative，让它成为内部绝对定位元素的定位基准：

.size {
  height: 150px;
  width: 200px;
  position: relative; /* 关键：添加这一行 */
  overflow: hidden; /* 可选：如果需要裁剪hover前超出容器的文字 */
}

/* 假设你的文字叠加层类是.image-text */
.image-text {
  position: absolute;
  bottom: -100%; /* 默认隐藏在容器底部外 */
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 10px;
  transition: bottom 0.3s ease-in-out;
}

.size:hover .image-text {
  bottom: 0; /* hover时滑入容器覆盖图片 */
}

额外检查点 #

如果添加position: relative后问题还存在，可以排查这几点：

• 确认文字元素的position: absolute属性是否正确设置，没有被其他CSS规则覆盖
• 检查文字元素的bottom/top/left/right取值是否符合预期，避免因单位或数值错误导致定位偏差
• 重置文字元素的默认边距：给它加上margin: 0; padding: 0;，防止Chrome的默认样式干扰
• 查看父容器是否有transform属性——Chrome会把设置了transform的元素也当作绝对定位的基准，如果你的.size有transform样式，也可能影响定位逻辑

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