CSS中如何阻止元素hover放大时带动其他页面元素移位？

我有一个包含图片的box元素，鼠标hover时该元素会放大以显示文本，但页面其他元素会随之移位。尝试使用position: absolute或fixed属性无效，请问仅通过CSS能否实现不带动页面元素移位？

当前效果：

• hover前：box高度为300px，右侧bio区域正常显示
• hover后：box高度变为400px，右侧bio区域被挤移位

原代码示例 #

CSS

.aboutme {
  padding-top: 15%;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

.box {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 500px;
  margin-left: 40px;
  background: #141414;
  transition: 0.5s;
  font-family: consolas;
}

.box:hover {
  height: 400px;
}

.box .imgBx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.bio {
  background: linear-gradient(235deg, #0c0c0c, #161616);
  border-radius: 10px;
  padding: 20px;
  color: #fff;
  font-size: 20px;
  font-family: consolas;
  max-width: 40%;
}

HTML

<div class="aboutme">
  <div class="box">
    <div class="imgBx" id="aboutme">
      <img src="me.jpg">
    </div>
    <div class="content">
      <h2>Raul Souza<br><span>Computer Scientist</span></h2>
    </div>
  </div>
  <section class="bio">
    ..generic text and images..
  </section>
</div>

解决方案（纯CSS实现） #

问题根源：修改height会改变元素的盒模型占位尺寸，触发flex布局重排，导致右侧元素移位。以下两种方案可解决该问题：

方案1：使用transform: scaleY()（推荐）

通过缩放变换实现视觉上的高度增加，元素实际占位尺寸不变，不会影响页面布局：

.box:hover {
  /* 400/300 ≈ 1.333，对应高度从300px放大到400px */
  transform: scaleY(1.333);
  /* 设置缩放原点为底部中心，保证元素底部位置不变，避免向上偏移 */
  transform-origin: bottom center;
}

/* 调整content位置，确保hover时文本正确显示 */
.box .content {
  position: absolute;
  bottom: 20px;
  text-align: center;
  color: #fff;
  width: 100%;
}

方案2：通过负margin抵消高度变化

如果必须使用height属性，可通过负margin保持元素底部位置不变，避免flex布局重排：

.box:hover {
  height: 400px;
  /* 高度增加了100px，用负margin-top抵消，保持元素底部位置与hover前一致 */
  margin-top: calc(500px - 100px);
}

.box .content {
  position: absolute;
  bottom: 20px;
  text-align: center;
  color: #fff;
  width: 100%;
}

两种方案都能实现hover时box放大显示文本，同时右侧bio区域不会移位。

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