求助：CSS实现position切换（relative↔absolute）的双向过渡动画

问题出在这几个核心点：

• CSS的position属性不支持过渡动画，你写的transition: position 0.7s ease-in-out完全无效，浏览器不会对position的变化做平滑过渡。
• 鼠标移出时，.name-container从position: absolute切换回relative，定位上下文突然改变，浏览器无法计算连续的过渡状态，直接跳回初始位置。
• 初始状态的transition被重复声明覆盖了——你写了两个transition，后面的会覆盖前面的，所以top属性的过渡在初始状态下其实没生效。

修复方案（推荐） #

核心是不切换position属性，始终用position: absolute，通过控制top值实现位移，同时确保父元素作为定位容器。修改后的代码：

.team-member {
  position: relative; // 必须保留，作为absolute元素的定位基准
  overflow: hidden; // 可选，防止元素超出容器范围

  .name-container {
    position: absolute; // 固定用absolute，不切换定位方式
    top: 90%;
    left: 0;
    right: 0;
    transition: top 0.7s ease-in-out; // 只过渡top属性即可
  }

  &.hovered .name-container {
    top: 30%; // 悬停时修改top值，触发平滑过渡
  }
}

方案说明 #

• 始终使用position: absolute，避免定位上下文切换导致的动画中断，确保移入/移出时的过渡状态连续。
• 父元素.team-member必须设置position: relative，让.name-container的absolute定位基于父容器，而不是整个文档。
• 移除无效的position过渡声明，同时避免transition重复声明导致的覆盖问题。

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