Bootstrap 4边框覆盖按钮问题：如何让边框置于按钮后方？

要让边框位于"APPLY NOW"按钮后方，核心是调整元素的层叠顺序，这里有两种简单可行的方法：

方法一：提升按钮的层级 #

给按钮添加一个自定义类，通过z-index让它覆盖在边框上方：

1. 添加CSS样式：

.btn-raise {
  position: relative; /* z-index仅对定位元素生效 */
  z-index: 1;
}

2. 修改HTML中的按钮：

<button type="button" class="btn btn-primary float-right btn-raise">APPLY NOW</button>

方法二：降低边框伪元素的层级 #

如果你的.border-center-right是通过伪元素（比如:after）实现的边框，直接给伪元素设置更低的z-index：

.border-center-right:after {
  /* 保留你原有的边框样式 */
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
  transform: translateY(-50%);
  /* 新增这行 */
  z-index: -1;
}

原理说明 #

你的边框是通过绝对定位的伪元素生成的，它和浮动的按钮同属<h2>的子元素。默认情况下，伪元素:after会被插入到元素内容的最后，层叠顺序高于前面的按钮元素。通过调整z-index，我们可以改变它们的显示层级，让按钮处于边框的上方。

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