嵌套元素相对祖父级绝对定位，父级hover移动时如何保持静止？

需求背景 #

当祖父容器.parent的子元素.child-2被hover时，.child-2通过transform向上移动10%，但嵌套在.child-2内的<h1>需要保持相对于.parent的绝对定位，视觉上完全静止。此前尝试给<h1>添加反向hover过渡无效，且要求不能修改HTML结构或使用display:none。

问题根源 #

当元素应用transform属性时，会自动成为其内部绝对定位元素的包含块——即便<h1>的祖先.parent设置了position: relative，此时<h1>的定位参考也会从.parent变为被transform的.child-2，所以会跟随.child-2一起移动。

解决方案 #

通过给<h1>添加反向的transform，抵消.child-2hover时的移动效果，同时保持动画同步：

.parent {
  position: relative;
  background-color: lightblue;
  width: 300px;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 20px;
  padding: 20px;
}

.child-1 {
  flex: 1 1 20%;
  background-color: yellow;
}

.child-2 {
  flex: 1 1 80%;
  background-color: lightgreen;
  transition: transform 0.4s;
}

.child-2:hover {
  transform: translate(0, -10%);
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  /* 添加过渡动画，与父元素同步 */
  transition: transform 0.4s;
}

/* 抵消父元素的hover移动 */
.child-2:hover h1 {
  transform: translate(-50%, -50%) translate(0, 10%);
}

关键说明 #

1. 给<h1>添加transition属性，确保反向移动的动画和.child-2的移动完全同步，避免视觉突兀。
2. .child-2:hover h1中的translate(0, 10%)正好抵消了父元素translate(0, -10%)的位移，让<h1>视觉上始终保持相对于.parent的位置。
3. 无需修改原有HTML结构，纯CSS实现需求。

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