如何在HTML轮播图片的左下角放置learn more悬浮按钮

核心实现逻辑是通过父子元素的定位关系控制按钮层级，让按钮固定在每张轮播图的左下角，跟随轮播同步切换：

1. 修改HTML结构 #

将原来作为<img>标签的.mySlides改为容器结构，内部嵌套图片和按钮，确保每个轮播项对应独立的按钮，避免按钮固定在所有轮播图上方：

<div id="headerr" class="home">
    <div class="w3-content w3-section">
        <!-- 轮播项1 -->
        <div class="mySlides">
            <img src="https://images.unsplash.com/photo-1629199022827-eede3c3df471?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" style="width:100%;height:100%;object-fit:cover;">
            <button class="carousel-btn">Learn more</button>
        </div>
        <!-- 轮播项2 -->
        <div class="mySlides">
            <img src="https://images.unsplash.com/photo-1629220608817-0802c373e110?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" style="width:100%;height:100%;object-fit:cover;">
            <button class="carousel-btn">Learn more</button>
        </div>
    </div>
</div>

2. 调整CSS样式 #

给.mySlides添加相对定位属性作为子元素定位参照，给按钮添加绝对定位和层级属性，确保按钮悬浮在图片上方：

.mySlides {
/* max-width: 540px; */
display: none;
position: relative; /* 新增：作为子元素绝对定位的参照 */
height: 100vh;
width: 100%;
background: repeat scroll center center / cover;
}

/* 新增按钮样式 */
.carousel-btn {
  position: absolute;
  bottom: 2rem; /* 距离底部距离可自行调整 */
  left: 2rem; /* 距离左侧距离可自行调整 */
  z-index: 10; /* 确保层级高于图片 */
  padding: 0.8rem 1.5rem;
  background: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

@media only screen and (max-width: 600px) {
  .mySlides {
   display: none;
   position: relative; /* 同步新增相对定位 */
   max-width: 540px;
   height: 50vh;
   background: repeat scroll center center / cover;
  }
  /* 移动端适配按钮尺寸位置 */
  .carousel-btn {
    bottom: 1rem;
    left: 1rem;
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }
}

3. JS逻辑无需修改 #

原有轮播控制逻辑是通过操作.mySlides元素的显示隐藏实现轮播，修改结构后.mySlides类名保持不变，原有JS代码可以直接复用不需要调整。

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