css - Bootstrap Dropdown 将其他 div 向下移动

Question

当我点击下拉按钮时，它下面的其他内容也会随之向下移动。我试过 z-index, position:relative; position:static 我怎样才能防止这种情况发生。单击下拉菜单时，我不想移动任何东西。有什么想法吗？

      <div class='whiteBox'>
            <div class='newProducts'></div>
            <div id="compareInfo">
               <div id="comparisionTitle">Title</div>
               <div class="divStyle">
                  <div class="btn-group">
                     <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="chooseItem">Drop down Box<span class="caret"></span></button>
                     <ul class="dropdown-menu">
                        <li><a id="item1DropDown" href="#">item1</a></li>
                        <li><a href="#" id="action-2">item2</a></li>
                        <li><a href="#" id="action-3">item3</a></li>
                     </ul>
                  </div>
                  <!-- /btn-group -->
               </div>
               <div id="compareBoxes">
                  <div id="Label">Text under Dropdown</div>
                  <button class=
                     "btn btn-compare" id="compareButton" type=
                     "submit">Submit</button>
               </div>
            </div>
         </div>

#divStyle{
    list-style:none;
position:relative;
float:left;
        right:240px;
}

Answer 1

你必须设置你想要的下拉菜单的div，如下所示:

list-style:none;
position:relative;
float:left;

然后为它设置自己的位置。

Here是关于它的优秀可定制教程。