本文详解为何使用 transform: translate(0, -100%) 会导致子元素移出父容器，并推荐更稳定、可预测的 top + position: absolute 方案，配合明确的父容器高度约束，确保动画始终严格限定在父容器可视范围内。
本文详解为何使用 `transform: translate(0, -100%)` 会导致子元素移出父容器，并推荐更稳定、可预测的 `top` + `position: absolute` 方案，配合明确的父容器高度约束，确保动画始终严格限定在父容器可视范围内。
在 CSS 动画实践中，一个常见需求是让绝对定位的子元素（如标题栏、遮罩层）在父容器内从底部滑入顶部。许多开发者第一反应是使用 transform: translate(0, -100%)，但该方案存在根本性缺陷：-100% 是相对于元素自身高度计算的，而非父容器高度。因此当 .text-container 高度变化（如字体缩放、行高变动、响应式断点切换），或父容器未显式设高时，translate 的位移量就无法与父容器边界对齐，极易导致元素“滑出”可见区域，破坏布局完整性。
✅ 正确解法是放弃基于自身尺寸的 transform，改用基于父容器坐标的 top 定位：
.square-container {
position: relative;
height: 200px; /* 关键：必须显式定义父容器高度 */
overflow: hidden; /* 可选：双重保险，防止意外溢出 */
}
.text-container {
position: absolute;
bottom: 0;
left: 20px;
top: auto; /* 显式重置，避免冲突 */
transition: top 0.4s ease; /* 推荐添加缓动效果 */
}
.square-container:hover .text-container {
top: 0;
bottom: auto; /* 确保 top 生效，清除 bottom 影响 */
}? 核心要点：
- 父容器必须有明确高度（如 height: 200px 或 min-height），否则 top: 0 无法锚定到父容器顶部；
- 使用 top + bottom 的组合定位时，需在 hover 状态中显式设置 bottom: auto，避免定位属性冲突；
- transition 应作用于 top 属性本身，而非 transform，保证动画轨迹完全受控于父容器坐标系；
- 若需支持动态内容高度，可配合 calc() 或 JavaScript 动态计算初始 top 值，但静态场景下 top: 0 + bottom: 0 切换最为简洁可靠。
此方案不仅彻底规避了 translate 的百分比歧义问题，还具备更好的可维护性与可预测性——动画终点永远精准停驻于父容器顶部边缘，无论子元素内容如何变化，都不会越界。
