html - 获取按钮悬停在图像上

Question

大家好，我正在尝试让 bootstrap 3 中的按钮与我的图像重叠，我了解 z-index 1 的用法，但我似乎根本无法让它工作。

HTML:

.btn-warning {
  color: #fff;
  background-color: rgba(255, 198, 0, 0.9);
  border: 0;
  padding: 20px;
  border-radius: 26px;
  line-height: 0.428571;
}

.aboutpic {
  margin-bottom: 19px;
}

<div class="aboutpic">
  <img src="//via.placeholder.com/350x150" class="img-responsive">
  <button type="button" class="btn btn-warning">Download CV</button>
</div>

Answer 1

试试这个:

.btn-warning {
 color: #fff;
 background-color: rgba(255,198,0,0.9);
 border: 0;
 padding: 20px;
 border-radius: 26px;
 line-height: 0.428571;
 position: absolute;
 z-index: 1;
 top: 50%; 
 left: 50%; 
 transform: translate(-50%, -50%);
}

您需要向按钮添加一个 position: absolute; 和一个 z-index: 1 以便它可以位于图像的顶部。

codepen.io/lauraeddy/pen/KXEwOW