如何通过HTML/CSS将按钮置于轮播图图片上方

看起来你遇到的核心问题是堆叠上下文（stacking context）和文档流定位的冲突，我来帮你一步步梳理并解决：

问题根源分析 #

1. 你给.carousel-item设置了z-index: -1，这会让整个轮播项（包含图片和按钮容器）创建一个负层级的堆叠上下文——哪怕按钮容器的z-index再高，也只能在这个负层级的上下文里排序，自然会被其他元素或图片挡住。
2. 按钮容器默认是文档流元素，会排在图片的下方，没有脱离文档流，所以默认显示在图片之后。
3. 全局的div{}样式会影响所有div元素，比如margin:10px auto会让按钮容器偏离你想要的位置，这种全局样式很容易引发布局冲突。

修复后的CSS代码 #

/* 删掉全局div样式，改用更具体的选择器避免影响所有元素 */
/* div {
  padding: 0;
  display: block;
  margin: 10px auto 10px auto;
  max-height: 100%;
  max-width: 100%;
} */

.carousel-item{
  /* 移除z-index:-1，避免创建负层级的堆叠上下文 */
  /* z-index:-1; */
  background-size: cover;
  /* 设置为relative，让内部绝对定位的元素以它为参考 */
  position: relative;
}

.carousel-item img {
  padding: 0;
  display: block;
  margin: 0 auto;
  max-height: 90%;
  max-width: 90%;
  /* 不需要z-index:-1，绝对定位的按钮会自然覆盖在图片上方 */
  /* z-index:-1; */
}

/* 给按钮容器设置绝对定位，脱离文档流覆盖在图片上 */
#fila1 {
  position: absolute;
  /* 可根据需求调整位置，示例为顶部居中 */
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10; /* 确保层级高于图片 */
  margin: 0; /* 清除全局div带来的外边距 */
}

/* Buttons Style */
.btn {
  color:black;
  background-color:white;
  border:white;
  margin:10px;
  /* padding不能设为负数，改为合理的内边距 */
  padding: 0 10px;
  text-decoration:underline;
  font-weight:bold;
  max-width:90px;
  height:30px;
  margin-right:22px;
  /* 父容器已设置z-index，这里无需重复 */
  /* z-index:1; */
}

关键修改说明 #

• 移除.carousel-item的负z-index：这是最核心的修复，负层级会让整个轮播项的堆叠优先级低于默认元素，导致内部所有元素被遮挡。
• 给.carousel-item添加position:relative：作为绝对定位子元素的参考容器，确保按钮能相对于轮播图片精准定位。
• 按钮容器设置position:absolute：脱离文档流后，按钮容器不再排在图片下方，而是可以覆盖在图片上，通过top、left等属性调整到你想要的位置。
• 删除全局div{}样式：全局样式会污染所有div元素，改用针对性选择器控制特定元素的样式更安全。
• 修正按钮的padding值：padding不能设为负数，会导致按钮内容溢出或布局异常，改为合理的正数即可。

调整后按钮就能正常显示在图片上方了，你可以根据需求修改#fila1的top、left等属性来改变按钮的位置。

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