bootstrap下拉菜单重叠包装div

Question

允许引导按钮下拉列表与包含div重叠的正确方法是什么？包含div有overflow-y:scroll.当前问题是当显示包含下拉内容时,内容保持在可滚动div内.

尝试使用下拉列表的绝对定位,将位置css更改为固定确实允许重叠.这是正确的方法吗？

这是jsfiddle演示:http: //jsfiddle.net/weaver_je/pA6cx/1/

位置:固定的第一个按钮(.btn1)最接近所需的输出.

<div style="width:120px; height:150px; overflow-y:scroll;">
<div class="dropdown">
  <button class="btn dropdown-toggle btn1" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

    <br/><br/>

<div class="dropdown">
  <button class="btn dropdown-toggle btn2" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
</div>

$(".btn1").click(function (e) {         
    $(".dropdown-menu").css({
        position:"fixed",
        display: "block",
        left: e.pageX,
       top: e.pageY
    });

    return false;
});

$(".btn2").click(function (e) {           
    $(".dropdown-menu").css({
        position:"absolute",
        display: "block",
        left: e.pageX,
        top: e.pageY
    });

    return false;
});

Answer 1

一种仅通过 CSS 实现此目的的方法：

Bootply： http: //jsfiddle.net/pA6cx/2/

CSS：

body > div > div.dropdown.open {
position: absolute;
}

仅适用于第一个按钮，我没有编辑第二个......

评论后：Jsfiddle：http://jsfiddle.net/fw522/2/

body > div > div.dropdown.open:hover{
position: absolute;
}

仅当鼠标悬停时设置为绝对位置