在引导带3 .well中定位相对和绝对框

Question

我正在研究这个演示。为什么我不能正确地将#box-wrap及其子元素(#box-1, #box-2, #box-3)定位在引导带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">&gt;</button></div> 
        <div id="box-3"><button class="btn btn-success">&lt;</button></div>  
      </div>
    </div>
  </div>
</div>

​

Answer 1

如果我正确地理解了您的布局，下面是我的解决方案。

我删除了position: absolute;，并将box-2、box-3从divs更改为spans (因为div默认具有display:block )。

<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">&lt;</button></span>      
        <span id="box-2"><button class="btn btn-success">&gt;</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;
}

演示

更新 (Thx @ckuijjer)

谢谢@ckuijjer的评论。下面是的更简单的版本，它完成了同样的任务：

简化的

<div class="container">
  <div class="row">  
    <div class="well"> 
      <div id="box-1"></div>
      <button class="btn btn-success">&lt;</button>
      <button class="btn btn-success">&gt;</button>
    </div>
  </div>
</div>

简化CSS

#box-1 {
    height:120px;
    background:khaki;
}

简化演示

Answer 2

只需将css更改为

#box-2 {
    position: absolute;
    top: 45px;
    float:right;
    right: 5px;
}

工作演示

Answer 3

使用#box-1{ position:relative; }

会解决这个问题。我认为，由于方框-1的父元素没有固定的高度，这在某种程度上影响了使用位置:对于一个子div来说是绝对的。