Positioning relative and absolute boxes inside the Bootstrap 3 .well - css

Question

I am working on this demo. Why am I not able to position the #box-wrap and its child element (#box-1, #box-2, #box-3) properly inside the Bootstrap 3 .well?
#box-wrap {
position: relative;
width:100%;
background-color:#fff;
}
#box-1 {
position: absolute;
width:100%;
height:120px;
top: 0;
left: 0;
background:khaki;
}
#box-2 {
position: absolute;
top: 5px;
left: 5px;
}
#box-3 {
position: absolute;
top: 44px;
left: 5px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="container">
<div class="well">
<div id="box-wrap">
<div id="box-1"></div>
<div id="box-2"><button class="btn btn-success">></button></div>
<div id="box-3"><button class="btn btn-success"><</button></div>
</div>
</div>
</div>
</div>

Answer 1

If I understood your layout correctly, here's my solution.
I removed position: absolute; and changed the box-2, box-3 from divs to spans (since divs have a display:block by default.
HTML
<div class="row">
<div class="container">
<div class="well">
<div id="box-wrap">
<div id="box-1"></div>
<span id="box-3"><button class="btn btn-success"><</button></span>
<span id="box-2"><button class="btn btn-success">></button></span>
</div>
</div>
</div>
</div>
CSS
#box-wrap {
position: relative;
width:100%;
}
#box-1 {
width:100%;
height:120px;
top: 0;
left: 0;
background:khaki;
}
#box-2,
#box-3 {
background:khaki;
}
DEMO
UPDATE (Thx #ckuijjer)
Thanks to #ckuijjer for the comment. Here's his simpler version that accomplishes the same thing:
Simplified HTML
<div class="container">
<div class="row">
<div class="well">
<div id="box-1"></div>
<button class="btn btn-success"><</button>
<button class="btn btn-success">></button>
</div>
</div>
</div>
Simplified CSS
#box-1 {
height:120px;
background:khaki;
}
Simplified DEMO

Answer 2

Just change your css as
#box-2 {
position: absolute;
top: 45px;
float:right;
right: 5px;
}
Working Demo

Answer 3

Using
#box-1{
position:relative;
}
will solve the issue.
I think as none of the parent element of box-1 has fixed height this is somehow affecting using position:absolute for a child div.