Get button to hover over image - html

Question

Hi guys i am trying to get my button in bootstrap 3 to overlap my image, i understand the use of z-index 1 but i cant seem to get it to work at all.
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

Try this:
.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%);
}
You'll need to add a position: absolute; and a z-index: 1 to the button so that it can sit on top of the image.
codepen.io/lauraeddy/pen/KXEwOW

Answer 2

You can set the position of aboutpic to relative and the button to absolute, as in the following example.
UPDATE
Added style attributes to center the button over an arbitrarily sized image, using 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

Please try the following,
.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>
Hope this helps.