如何将链接对齐到hero-area区域的右下角？

问题原因 #

position: absolute 规则的元素会以最近一个设置了非static定位的父元素为基准进行偏移，你当前未给.hero-area设置定位规则，且按钮元素嵌套在container、col等多层容器内，导致定位基准被限制在内层容器，只能在container范围内对齐。

方案1：调整DOM结构（兼容性最好，无额外依赖） #

步骤1：新增CSS规则，给hero-area设置相对定位作为偏移基准

.hero-area {
  position: relative;
  /* 你原有hero-area的其他样式保持不变即可 */
}

步骤2：调整HTML结构，把按钮元素移为hero-area的直接子元素

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="hero-area hero-style-03 christian-hero-bg">
  <div class="container">
    <div class="row">
      <div class="col-lg-5 col-md-7 ml-auto">
        <div class="hero-content text-left">
          <h2 class="text-black">Text1 </h2>
        </div>
      </div>
    </div>
  </div>
  <!-- 按钮元素移到此处，作为hero-area的直接子元素 -->
  <div class="ht-btn-area section-space--mt_40 rt">
    <a href="#" class="hero-btn">x</a>
  </div>
</div>

你原有的.rtCSS规则不需要修改，即可实现按钮对齐到hero-area区域右下角。

方案2：不改动DOM结构，仅调整CSS #

如果不方便调整DOM结构，可以仅修改CSS规则，需要确认.rt的所有父级元素（container、row、col、hero-content等）都没有设置position: relative/absolute/fixed属性：

/* 给hero-area设置相对定位作为偏移基准 */
.hero-area {
  position: relative;
  /* 原有样式保持不变 */
}
.rt {
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 10; /* 避免被其他元素遮挡，数值可根据实际场景调整 */
}

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