如何将Register按钮定位在卡片底部而非外层主容器底部？

嘿，这个问题我之前也踩过坑！其实核心原因是绝对定位的参照对象没设置对——当你给按钮用position: absolute时，它会自动向上寻找最近的、设置了非static定位的父元素作为参照基准，如果所有父元素都没设置定位属性，它就会默认以最外层的容器（也就是你说的主div）来定位啦。

给你几个简单的解决步骤：

• 第一步：给卡片容器.cardHorizontal添加position: relative属性，这样按钮的绝对定位就会以这个卡片为基准，而不是外层的大容器。
• 第二步：给Register按钮设置position: absolute; bottom: 0;，再根据需求调整水平位置（比如居中的话可以加left: 50%; transform: translateX(-50%);）。
• 第三步：记得给.cardHorizontal加一点padding-bottom，避免按钮覆盖卡片里的底部内容（因为绝对定位的元素不会占据容器空间）。

修改后的代码示例如下：

<style>
.cardHorizontal {
  cursor: default;
  display: inline-block;
  transition: 0.3s;
  width: 290px;
  margin-right: 20px;
  /* 添加相对定位，作为按钮绝对定位的参照 */
  position: relative;
  /* 底部内边距，防止按钮覆盖内容 */
  padding-bottom: 60px;
  /* 可选：加个边框/背景更直观看到卡片范围 */
  border: 1px solid #eee;
  border-radius: 20px;
  padding: 10px;
}
</style>

<div style="height: 2000px; background-color: #F8F6F7;">
  <div style="margin-left: 20px;">
    <br><br>
    <!-- Card #1 -->
    <div class="cardHorizontal">
      <a href="#" target="_blank">
        <img src="https://www.jquery-az.com/html/images/banana.jpg" style="width:50%; border-radius: 20px; margin: auto; display:block;">
      </a>
      <div class="container">
        <h3><b>Card Title</b></h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum bibendum arcu quis molestie. Duis at pretium justo, at egestas leo. Quisque gravida, est sit amet blandit sagittis, lorem sem iaculis diam, nec facilisis mauris arcu quis orci. Etiam eget ullamcorper ipsum. Maecenas eu nulla ac quam aliquet bibendum vitae vitae est.</p>
        <p style="font-size: 16px"><b>Date: January 2050</b></p>
        <a href="#">Read More</a>
      </div>
      <button style="background-color: #6D925C; color: white; height: 50px; width: 150px; padding: 0; border: none; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);" type="button">Register</button>
    </div>
  </div>
</div>

这样调整后，按钮就会乖乖待在卡片的底部啦～

备注：内容来源于stack exchange，提问作者JB999