使用 CSS top 属性替代 transform: translate() 可确保子元素在父容器边界内平滑移动，避免因相对自身尺寸计算导致的越界问题。
使用 css `top` 属性替代 `transform: translate()` 可确保子元素在父容器边界内平滑移动，避免因相对自身尺寸计算导致的越界问题。
在实现子元素（如 .text-container）从父容器底部左侧滑动至顶部左侧的交互动画时，许多开发者会本能地选择 transform: translate(0, -100%)。但该写法的问题在于：-100% 是相对于元素自身高度计算的位移量，而非父容器。当子元素高度变化（如字体缩放、响应式断点切换、内容动态增减）或父容器未显式设高时，位移量极易超出父容器可视区域，造成“上滑过头”或内容被裁切。
更稳健的方案是改用基于父容器坐标系的定位控制——即结合 position: absolute 与 top / bottom 的显式值切换，并通过 transition 实现动画：
.square-container {
position: relative;
height: 200px; /* 必须设置明确高度，确保绝对定位有参照基准 */
overflow: hidden; /* 可选：防止意外溢出时显示滚动条或内容外露 */
}
.text-container {
position: absolute;
left: 20px;
bottom: 0; /* 初始位置：贴父容器底边 */
top: auto; /* 显式重置，避免 top/bottom 同时生效冲突 */
transition: top 0.4s ease-out; /* 推荐添加缓动函数提升体验 */
}
.square-container:hover .text-container {
top: 0; /* 目标位置：贴父容器顶边 */
bottom: auto; /* 关键！禁用 bottom，确保 top 生效 */
}
✅ 关键要点说明：
- 父容器必须设置 position: relative 和明确高度（height 或 min-height），否则 top: 0 将失去参照；
- 子元素初始用 bottom: 0 定位，动画时切换为 top: 0，并配合 top: auto / bottom: auto 显式清除对立属性，避免定位冲突；
- overflow: hidden 在父容器上可作为安全兜底，防止极端情况下内容短暂越界；
- 动画时间建议控制在 0.3s–0.5s，配合 ease-out 或 cubic-bezier(0.25, 0.46, 0.45, 0.94) 提升自然感。
此方法完全脱离元素自身尺寸依赖，动画轨迹严格限定在父容器内部，兼容各种响应式场景与动态内容，是生产环境推荐的最佳实践。
