Put <div> over another <div> CSS - html

Question

What iam trying to do is to put a with two imagebuttons over another which is used only for the backround-color.
For example:
How can i put the div with the two buttons over the backround exact like in the attached image.
My Code so far:
CSS:
.behind
{
background-color: #e2e0de;
width: 100%;
height: 130px;
z-index: -1;
}
HTML:
<div>
<div class="behind">
<asp:ImageButton ID="btnCheckin" runat="server" ImageUrl="~/image/button1.png"
CssClass="checkinButton" />
<asp:ImageButton ID="btnCheckout" runat="server" ImageUrl="~/image/button2.png"
CssClass="checkoutButton divider" />
</div>
</div>
With my Code is looks like:

Answer 1

Your images are wrapped in the behind div, so they start at the same point your background does. First, move them out:
<div>
<div class="behind"></div>
<asp:ImageButton ID="btnCheckin" runat="server" ImageUrl="~/image/button1.png"
CssClass="checkinButton" />
<asp:ImageButton ID="btnCheckout" runat="server" ImageUrl="~/image/button2.png"
CssClass="checkoutButton divider" />
</div>
Secondly, update the .behind css to start at an absolute position (i.e. not from the top). Notice the position: absolute and the top: 20px elements. Just replace 20px with a value suitable for you, depending on the size of the images.
.behind {
background-color: #e2e0de;
width: 100%;
height: 130px;
z-index: -1;
position: absolute;
top: 20px;
}
Here is a working fiddle, but I've used other images so the value for the top: offset is different.

Answer 2

try this it might help (UNTESTED) :
.checkoutButton
{
position:relative;
top:-value;
z-index: 10;
}
PS : change the value to a a real value for exemple if your buttons height was 136px then give it -3px -> ((buttons height-divs height)/2).
i hope it helps and sorry for not testing it i can't at the moment