将Div定位至另一Div底部并针对移动端优化

嘿，我懂这种卡在定位细节上的头疼！你遇到的问题其实是position: absolute的常见坑——没给父容器设置相对定位，导致子元素跑偏到整个页面的坐标系上，自然容易溢出；另外白色div（.cta-text）里的内容没做垂直对齐，才会一直顶在顶部。

下面给你一套具体的修复方案：

• 给父容器添加相对定位：把.span4.widget-span.widget-type-custom_widget加上position: relative;，这样内部的绝对定位元素会以这个父容器为基准定位，不会乱跑。
• 固定子元素到父容器底部：给.cta-text设置position: absolute; bottom: 0; left: 0; right: 0;，让它牢牢贴在父容器底部，同时左右撑满（如果不需要撑满可以调整left/right的值）。
• 修复父容器高度塌陷：如果父容器里只有这个绝对定位的子元素，父容器会因为子元素脱离文档流而高度塌陷，这时候可以给父容器加min-height: [你需要的最小高度];，或者如果父容器里有其他内容，确保那些内容能撑开父容器的高度。
• 调整白色div内的内容位置：如果想让.cta-text里的内容不再顶在顶部，可以给它加display: flex; align-items: center; justify-content: center;，这样内容会垂直水平居中，当然你也可以根据需求调整align-items的值（比如flex-start保持顶部，flex-end贴底部）。

修改后的CSS示例：

.span4.widget-span.widget-type-custom_widget {
  display: inline-block;
  margin: 10px;
  width: 31%;
  text-align: center;
  position: relative; /* 新增：让子元素以它为基准定位 */
  min-height: 200px; /* 可选：防止父容器高度塌陷，根据实际需求调整数值 */
}

.cta-text {
  width: 90%;
  margin: 0 auto;
  background-color: #ffffff;
  position: absolute; /* 新增：绝对定位 */
  bottom: 0; /* 贴父容器底部 */
  left: 5%; /* 因为width是90%，left设5%让它水平居中 */
  right: 5%;
  display: flex; /* 新增：方便调整内容位置 */
  align-items: center; /* 内容垂直居中，可改成flex-start/flex-end */
  justify-content: center; /* 内容水平居中 */
  padding: 10px 0; /* 可选：加内边距让内容不贴边 */
}

.clearfix.cta-wrapper {
  /* 补全clearfix的常规写法，避免浮动影响布局 */
  clear: both;
  content: "";
  display: table;
}

另外要注意，如果父容器的高度是由内部其他内容撑开的，那min-height可以不用加，只要保证父容器有实际高度，绝对定位的子元素就不会溢出页面啦。

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