CSS buttons not aligning over image properly - css

Question

I am using a responsive design (bootstrap) with the following concept in mind:
Large responsive image, two buttons float over the image at the bottom of the image, buttons adjust relative to the image size as window size changes.
<div>
<span class="graphic-buttons" id="graphic-button-1">Button1</span>
<span class="graphic-buttons" id="graphic-button-2">Button2</span>
<div>
<img src="images/home/test.jpg"/>
</div>
</div>
.graphic-buttons {
text-align:center;
font-size: 1.3em;
font-style:italic;
font-weight: 700;
line-height: 40px;
color: #000;
height: 40px;
padding: 10px 15px 10px 15px;
border-radius: 5px;
border: 1px solid #FFF;
box-shadow: 5px 5px 5px #000;
background: #FFF;
}
#graphic-button-1{
position: absolute;
bottom: 0;
right: 0;
}
#graphic-button-2{
position: absolute;
bottom: 0;
left: 0;
}
However, the buttons are positioning themselves further down past the image height and into content lower than the image.
I tried display: table-cell, vertical-align:bottom for the buttons but that has not worked.
Thanks.

Answer 1

You need to set parent as relative for positionning.
See comments in code revisited :).
<div class="bt_img">
<span class="graphic-buttons" id="graphic-button-1">Button1</span>
<span class="graphic-buttons" id="graphic-button-2">Button2</span>
<div>
<img src="images/home/test.jpg"/>
</div>
</div>
.bt-img {
position:relative;/* childs in absolute will refer to area where .bt-img is displayed */
}
.graphic-buttons {
text-align:center;
font-size: 1.3em;
font-style:italic;
font-weight: 700;
line-height: 40px;
color: #000;
height: 40px;
padding: 10px 15px 10px 15px;
border-radius: 5px;
border: 1px solid #FFF;
box-shadow: 5px 5px 5px #000;
background: #FFF;
}
#graphic-button-1{
position: absolute;
bottom: 0;
right: 0;
}
#graphic-button-2{
position: absolute;
bottom: 0;
left: 0;
}
img {
vertical-align:top; /* or bottom: = removes it from baseline and shows no gaps under */
}