HTML CSS技术求助：悬停时固定.box位置，让.hidden溢出覆盖下方元素

嘿，我来帮你搞定这个问题！针对你提到的两个需求，咱们可以通过CSS的定位属性来完美解决，具体方案如下：

1. 让带图片的.box保持固定位置 #

要让.box稳稳待在原地不被其他元素干扰，只需要给它加上position: relative属性。这个设置会让.box保持在正常文档流中的位置，同时还能成为内部元素绝对定位的“参考容器”，为后续的悬浮层定位打基础。

2. 鼠标悬停时.hidden覆盖图片且不移动.box #

核心思路是把.hidden设置为绝对定位，让它“贴”在.box的内部，这样它的显示/隐藏完全不会影响.box的布局，自然也就不会让.box移动。具体操作步骤：

• 给.hidden设置position: absolute，同时搭配top: 0、left: 0、width: 100%、height: 100%，让它完全覆盖住.box的整个区域
• 默认状态下把.hidden设置为opacity: 0（完全透明），配合过渡动画实现平滑的显示效果
• 当鼠标悬停在.box上时，把.hidden的opacity改为1，同时可以给它加个半透明背景色，让描述文本更清晰易读

完整代码示例 #

HTML部分

<div class="box">
  <img src="你的图片URL" alt="图片描述">
  <div id="caption">图片标题</div>
  <div class="hidden">这里是隐藏的描述文本，鼠标悬停时会显示哦</div>
</div>

CSS部分

.box {
  width: 170px;
  transition: all .4s ease;
  border-bottom: 10px solid #fff;
  color: #000 !important;
  /* 关键：设置相对定位，作为内部绝对定位元素的参考 */
  position: relative;
  /* 可选：根据图片高度设置最小高度，避免布局塌陷 */
  min-height: 200px;
  overflow: hidden; /* 防止文本超出盒子范围 */
}

#caption {
  width: 160px;
  font-size: 15px;
  text-decoration: none;
  margin: 0 0 0 5px;
}

.hidden {
  /* 绝对定位，相对于父元素.box定位 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 默认隐藏（完全透明） */
  opacity: 0;
  transition: opacity .4s ease;
  /* 半透明背景提升文本可读性 */
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px;
  box-sizing: border-box;
}

/* 鼠标悬停.box时，显示隐藏的描述文本 */
.box:hover .hidden {
  opacity: 1;
}

关键要点说明 #

• position: relative是核心：它让.box成为内部绝对定位元素的参考，确保.hidden只会在.box的范围内显示
• 绝对定位的元素不会占据文档流空间：所以.hidden的显示/隐藏不会改变.box的尺寸和位置，完美解决“不移动盒子”的需求
• 用opacity过渡代替display: none：既能实现平滑的动画效果，又不会因为display属性的切换导致布局重排

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