如何让悬停显示的图片信息框固定位置并解决偏移问题

当前.info-box作为.timeline-item的子元素，受父元素position: relative影响，会跟随hover的缩略图定位，无法对齐.timeline左侧。以下是修复方案：

修改后的CSS代码 #

/* Timeline layout */
.timeline {
  display: flex;
  position: relative; /* 设置为绝对定位参考容器 */
  margin-bottom: 400px; /* 为信息框预留显示空间 */
}

.timeline-item {
  position: relative;
  margin-right: 10px;
  /* 移除overflow: hidden，避免裁剪绝对定位的信息框 */
}

.thumbnail img {
  width: 100%;
}

.info-box {
  display: none;
  position: absolute; /* 改为绝对定位 */
  left: 0; /* 强制对齐timeline左侧 */
  top: 100%; /* 显示在缩略图行下方 */
  width: 100%; /* 可选：让信息框宽度与timeline一致 */
  background-color: #ffffff;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10; /* 确保信息框显示在最上层 */
}

.timeline-item:hover .info-box {
  display: block;
}

关键修改点说明 #

• 给.timeline添加position: relative，让内部绝对定位的元素以它为参考基准
• 将.info-box设为position: absolute，并通过left: 0固定在.timeline左侧，top: 100%将其放在缩略图行下方
• 移除.timeline-item的overflow: hidden，防止信息框被父容器裁剪

如果需要调整信息框的显示位置（比如右侧、上方），只需修改left/right/top/bottom的数值即可。

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