如何让含内容的div展开时不移动下方页面元素？

我明白你遇到的困扰：当鼠标悬停在区块上显示隐藏文本时，下方的按钮区域被挤下去了。你尝试用position:absolute但没达到预期，核心原因是没有给父元素设置position:relative，导致绝对定位的元素脱离了父容器的范围，无法正确悬浮在区块下方。

下面是修复后的方案，我会一步步解释改动点：

关键修改思路 #

1. 让父容器成为绝对定位元素的参考：给.col添加position:relative，这样内部的绝对定位元素会以父容器为基准定位
2. 将隐藏文本设置为绝对定位：脱离正常文档流，这样它显示时不会占据空间，也就不会推移下方内容
3. 调整样式确保显示效果：给展开的文本添加背景色、调整位置和宽度，避免和其他内容重叠

修复后的CSS代码 #

.col { 
  padding: 20px; 
  position: relative; /* 关键：让子元素的absolute以这个容器为基准 */
  min-height: 200px; /* 可选：固定最小高度，让布局更稳定 */
}
.col:hover { background-color: lightgray; }
.revealOnHover { 
  display: none; 
  position: absolute; /* 脱离文档流 */
  top: 100%; /* 定位在父容器底部的下方 */
  left: 0;
  right: 0;
  background-color: white; /* 添加背景色，避免和下方内容重叠 */
  padding: 10px 20px; /* 保持和父容器一致的内边距 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 可选：添加阴影提升层次感 */
  z-index: 10; /* 确保悬浮在其他元素上方 */
}
#block1:hover .revealOnHover, #block2:hover .revealOnHover { display: block; }

完整代码示例 #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<div class="container">
  <div class="row">
    <div class="col" id="block1">
      <img src="https://picsum.photos/100/100?random=1">
      <p><b>Lorem ipsum dolor sit amet</b></p>
      <i class="fas fa-caret-down" style="color: red;"></i>
      <p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="col" id="block2">
      <img src="https://picsum.photos/100/100?random=1">
      <p><b>Excepteur sint occaecat cupidatat non proident</b></p>
      <i class="fas fa-caret-down" style="color: red;"></i>
      <p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
  <p>&nbsp;</p>
  <div style="text-align: center;">
    <a href="https://google.com" target="_blank"><button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button></a>
    <a href="https://agoria.be" target="_blank"><button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button></a>
  </div>
</div>

效果说明 #

现在当你鼠标悬停在区块上时，隐藏的文本会悬浮在区块下方，不会占据正常文档流的空间，所以下方的按钮区域不会被推移。同时因为设置了position:relative，展开的文本会严格对齐父容器的宽度，不会乱跑。

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