如何将子div从父容器左下角平移至左上角且不超出父容器？

问题描述 #

我尝试在hover状态下将.text-container从其父容器square-container的左下角平移至左上角，使用transform: translate(0, -100%);实现。该效果在部分视口尺寸下正常，但在其他视口尺寸中，.text-container会移出父容器。请问如何让平移过程始终保持在父容器内？

当前代码 #

HTML代码 #

<div class="square-container">
  <div class="text-container">
    <h2>Lorem Ipsum</h2>
  </div>
</div>

CSS代码 #

.text-container {
  position: absolute;
  bottom: 0;
  left: 20px;
  transition: transform 0.4s;
}

.square-container:hover .text-container {
  transform: translate(0, -100%);
}

问题原因 #

transform: translate(0, -100%);中的百分比是基于.text-container自身高度计算的，而非父容器square-container的高度。如果父容器高度与子元素高度不匹配，平移距离就会出错，导致子元素移出父容器。另外，父容器未设置定位上下文，可能让子元素的定位基准错误。

解决方案 #

方案一：改用top/bottom属性过渡（推荐） #

这种方法直接基于父容器的定位边界，能确保元素始终在父容器内：

1. 给父容器添加position: relative，作为子元素absolute定位的基准
2. 初始状态设置bottom: 0，hover时切换为top: 0，通过过渡实现平滑动画

修改后的CSS：

.square-container {
  position: relative; /* 必须添加，确定子元素定位基准 */
  width: 300px; /* 示例宽度，可根据需求调整 */
  height: 300px; /* 示例高度，可根据需求调整 */
  border: 1px solid #000; /* 方便查看容器范围，可选 */
}

.text-container {
  position: absolute;
  left: 20px;
  bottom: 0;
  margin: 0; /* 清除h2默认margin，避免不必要偏移 */
  transition: top 0.4s, bottom 0.4s;
}

.square-container:hover .text-container {
  bottom: auto;
  top: 0;
}

方案二：保持transform但修正平移距离 #

如果一定要使用transform，需让平移距离等于父容器高度减去子元素自身高度。适合父容器高度固定的场景：

.square-container {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  --container-height: 300px; /* 定义父容器高度变量 */
}

.text-container {
  position: absolute;
  bottom: 0;
  left: 20px;
  margin: 0;
  transition: transform 0.4s;
  --text-height: 2em; /* 手动设置子元素高度，或用JS动态获取 */
}

.square-container:hover .text-container {
  transform: translate(0, calc(var(--container-height) - var(--text-height) - 100%));
}

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