如何在BootstrapVue Carousel轮播幻灯片上定位按钮等自定义元素

你遇到的问题核心原因是BootstrapVue的<b-carousel-slide>如果设置了img-src、text等内置属性，插槽内容会被自动包裹进默认的.carousel-caption容器中，而这个容器默认只在轮播底部的窄条区域，你设置的absolute定位元素是相对于这个窄条容器定位，自然无法覆盖到整个轮播区域。

针对你的三个问题，具体解决方案如下：

1. 要把元素放在轮播不同角落：要么修改默认.carousel-caption的样式让它铺满整个轮播区域，内部元素再用absolute定位；要么完全自定义轮播内容，不受默认容器限制。
2. 可以在caption div外自由添加元素：只要不传入img-src、text、caption等内置属性，自己手写轮播内所有内容，组件就不会生成默认的.carousel-caption容器，整个轮播项区域完全可控。
3. 要把caption div和指示器移到顶部：指示器直接修改.carousel-indicators的top属性、把bottom设为auto即可；caption要么修改默认容器的top属性，要么自定义内容自己控制位置。

方案1：保留原有结构，仅修改CSS适配 #

不用大改现有Vue代码，新增以下CSS即可：

/* 让默认caption铺满整个轮播区域 */
#story-carousel .carousel-caption {
  position: absolute;
  inset: 0;
  padding: 0;
  margin: 0;
  text-align: unset;
}

/* 右上角按钮样式 */
.highlight-button{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
}

/* 左下角按钮新增这个类即可 */
.bottom-left-button {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 10;
}

/* 把指示器移到顶部 */
#story-carousel .carousel-indicators {
  bottom: auto;
  top: 16px;
  z-index: 15;
}

/* 原有文字移到顶部可以加这个 */
#story-carousel .carousel-caption p {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
}

方案2：完全自定义轮播内容（灵活度更高） #

重写轮播代码，完全自主控制所有元素位置：

<b-carousel
  id="story-carousel"
  controls
  indicators
  :interval="3000"
>
  <b-carousel-slide>
    <!-- 自定义轮播图 -->
    <img src="https://picsum.photos/1024/480/?image=10" class="d-block w-100" alt="轮播图">
    <!-- 右上角按钮 -->
    <b-avatar size="md" variant="primary" icon="bookmark-heart" class="highlight-button" button></b-avatar>
    <!-- 左下角按钮 -->
    <b-link class="bottom-left-button">LINK</b-link>
    <!-- 自定义文案 -->
    <div class="custom-caption">asdasdasdsa</div>
  </b-carousel-slide>
</b-carousel>

对应CSS：

/* 给轮播项加相对定位，作为内部绝对定位元素的父级 */
#story-carousel .carousel-item {
  position: relative;
}

.highlight-button{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
}

.bottom-left-button {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 10;
  color: #fff;
}

.custom-caption {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: #fff;
}

/* 指示器移到顶部 */
#story-carousel .carousel-indicators {
  bottom: auto;
  top: 16px;
  z-index: 15;
}

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