html - 在隐藏滚动条上覆盖引导下拉菜单

Question

在此示例中jsfiddle ，如何使下拉菜单显示在前面的 div 上？ (我的意思是，不要用容器和内部容器 div 来切割)我已经使用了绝对/相对位置和 z 索引，但最终破坏了布局。

HTML:

<div class="container">
  <div class="inner-container">
    <div class="box">
      div #1
    </div>
    <div class="box">
      div #2
    </div>
    <div class="box">
      div #3
      <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
      <li><a href="#">E</a></li>
      <li><a href="#">F</a></li>
      <li><a href="#">G</a></li>
    </ul>
  </div>
    </div>
    <div class="box">
      div #4
    </div>
    <div class="box">
      div #5
    </div>
    <div class="box">
      div #6
    </div>
  </div>
</div>

CSS:

.container{
  overflow-y: hidden;
  overflow-x: hidden;
}

.inner-container{
  overflow-y: scroll;
  margin: 0 -30px 0 0;
  height: 200px;
}
.box{
  margin-bottom:5px;
  background-color:lightblue;
  height:50px;
}

Answer 1

尝试this :

ul.dropdown-menu {
   position: fixed;
   left: auto;
   top: auto;
}