Question

大家好我想让我的按钮在引导程序3中重叠我的图像，我理解使用z-index 1但我似乎无法让它工作。

HTML：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

Answer 2

您可以将aboutpic的位置设置为relative，将按钮设置为absolute，如下例所示。

<强>更新

添加了样式属性，使用calc(50% - [button width or button height])将按钮置于任意大小的图像上。

.btn-warning {
  color: #fff;
  background-color: rgba(255, 198, 0, 0.9);
  border: 0;
  padding: 20px;
  border-radius: 26px;
  line-height: 0.428571;
  width: 120px;
  height: 50px;
}

.aboutpic button {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 60px);
}

.aboutpic {
  margin-bottom: 19px;
  position: relative;
  width: 350px;
  height: 150px;
}

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

Answer 3

请尝试以下方法，

.btn-warning {
    color: #fff;
    background-color: rgba(255,198,0,0.9);
    border: 0;
    padding: 20px;
    border-radius: 26px;
        line-height: 0.428571;
}
img{
  height:200px;
  width:200px;
}

.aboutpic{
  position:relative;
}

.first{
  position:absolute;
  z-index:1;
}
.second{
  position:absolute;
  z-index:2;
  left:20px;
  top:50px;
}

 <div class="aboutpic">
   <div class="first">
          <img src="https://static.pexels.com/photos/377911/pexels-photo-377911.jpeg" class="img-responsive">   
   </div>
  <div class="second">
            <button type="button" class="btn btn-warning">Download CV</button>  
  </div>

  </div>

希望这有帮助。

获取按钮将鼠标悬停在图像上方

3 个答案: