通过调整 top 值替代 transform: translate()，可确保子元素在父容器内精准上下移动，避免因百分比计算偏差导致的越界问题。
通过调整 `top` 值替代 `transform: translate()`，可确保子元素在父容器内精准上下移动，避免因百分比计算偏差导致的越界问题。
在实现子元素（如 .text-container）从父容器底部左侧滑动到顶部左侧的交互动画时，许多开发者会直觉性地使用 transform: translate(0, -100%)。但该方案存在根本性缺陷：-100% 是相对于元素自身高度计算的位移量，而非父容器高度。因此当 .text-container 高度变化（例如字体缩放、行高变动、响应式断点切换），或父容器尺寸不固定时，位移量极易超出父容器边界，造成视觉溢出或布局错位。
更稳健的解法是回归定位本质——利用 position: absolute 配合 top 的显式控制：
.square-container {
position: relative;
height: 200px; /* 明确父容器高度，确保 top 值有参照基准 */
overflow: hidden; /* 可选：兜底防意外溢出 */
}
.text-container {
position: absolute;
left: 20px;
bottom: 0; /* 初始位置：贴父容器底边 */
top: auto; /* 重置 top，优先级低于 bottom */
transition: top 0.4s ease; /* 仅过渡 top 属性，更可控 */
}
.square-container:hover .text-container {
top: 0; /* 目标位置：贴父容器顶边 */
bottom: auto; /* 关闭 bottom，让 top 生效 */
}
✅ 关键优势：
- top: 0 始终锚定于父容器内容区顶部，不受子元素自身尺寸影响；
- 动画全程在父容器坐标系内完成，100% 可预测、无越界风险；
- 支持任意高度的 .text-container（单行/多行/动态内容），无需额外 JS 计算。
⚠️ 注意事项：
- 父容器必须设置 position: relative（建立定位上下文）；
- 若父容器高度不固定（如由内容撑开），建议通过 min-height 或 aspect-ratio 约束，或改用 flexbox + margin-top: auto 等流式方案；
- 避免同时声明 top 和 bottom（冲突会导致未定义行为），动画中应显式重置被覆盖的定位属性（如 bottom: auto）。
此方法兼顾语义清晰性、浏览器兼容性（支持所有现代浏览器及 IE11+）与维护性，是 CSS 定位动画的最佳实践之一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
