如何阻止div内的按钮位置受文本换行的影响

你之前设置position: absolute不生效的核心原因是没有给按钮的父容器（三个并排的卡片div）设置定位上下文，绝对定位的元素仅相对于最近的position属性不为static的父元素进行偏移，父容器默认都是static定位，所以绝对定位规则不会生效。
修改步骤如下：

1. 给卡片容器添加定位上下文和统一高度
   给.container的直接子div（即sedans等三个卡片）添加如下样式：

.container > div {
  position: relative;
  /* 如果用flex布局排列三个并排卡片，添加下面声明保证三个卡片高度统一 */
  height: 100%;
}

如果你的三个卡片是用flex布局排列，给外层.container补充样式：

.container {
  display: flex;
  align-items: stretch; /* 强制所有子元素高度和最高的卡片一致 */
}

2. 修改按钮的定位规则
   把按钮原来的position: relative改成absolute，删掉相对文本定位的margin-top，改用bottom属性固定到卡片底部的距离：

.container button {
  position: absolute; /* 替换原有的position: relative */
  margin-left: 3.125rem;
  /* 删除原有的margin-top: 9rem声明 */
  bottom: 0.625rem; /* 和你原有margin-bottom取值一致，固定距离容器底部的高度 */
  border-radius: 1.875rem;
  padding: 0.938rem;
  width: 9.375rem;
  border: none;
}

3. 可选优化（避免文本和按钮重叠）
   如果你不希望文本和按钮发生重叠，可以给p标签添加底部内边距，预留出按钮的占位空间：

.container div p {
  /* 保留原有样式，新增下面声明 */
  padding-bottom: 3rem; /* 取值大于按钮高度+bottom偏移量即可，可根据实际效果调整 */
}

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