如何让自定义button置于Bootstrap carousel轮播图上层不被遮盖

按钮被图片遮盖的核心原因是绝对定位的自定义按钮未声明z-index层级，同级DOM中先写的元素默认层级更低，图片在按钮结构之前，因此会覆盖按钮。

解决方案1：调整自定义样式 #

在你现有的SCSS代码中补充z-index和位置参数即可：

.carousel-item{
  position: relative;
}

.carousel-item .myButton {
  position: absolute;
  z-index: 10; // 层级只要大于0即可高于默认的图片层级，可按需调整
  top: 20px; // 可自定义距离轮播项顶部的距离
  left: 20px; // 可自定义距离轮播项左侧的距离
}

如果需要所有轮播项都显示悬浮按钮，把按钮结构复制到对应carousel-item容器内即可。

解决方案2：使用Bootstrap原生预置容器 #

你使用的是Bootstrap轮播组件，自带的.carousel-caption容器已经内置了适配轮播的层级和定位属性，直接将按钮放入该容器即可省略自定义层级的代码：

<div class="carousel-item active">
  <img src="assets/myimg8.jpg" class="d-block w-100 myImg" alt="...">
  <div class="carousel-caption">
    <button type="button" class="btn btn-dark myButton">Dark</button>
  </div>
</div>

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