Question

在此示例jsfiddle中，如何让下拉菜单显示在之前的div上？（我的意思是，不要用容器和内部容器div进行切割）我使用位置绝对/相对和z-index但我最终打破了布局。

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;
}

在隐藏的滚动条上叠加引导下拉菜单

1 个答案: