下拉菜单不与父菜单重叠 div (bootstrap2)

Question

我有一个 select 下拉菜单，一旦打开，在其父容器中从视图中变为 'hidden' - 下拉菜单是通过 ddSlick.js 库生成的（用于创建带有图像的下拉菜单）。

<div class="span6 column2">
   <div class="form-section">
        <div id="iconSelector"></div>
   </div>
</div>

使用 ddSlick.js 它生成以下内容 - 我想让 dd-container 中的此内容与父 div 重叠。有什么想法吗？

<div style="width: 260px;" class="dd-container" id="iconSelector">
<div style="width: 260px; background: none repeat scroll 0% 0% rgb(255, 255, 255);" class="dd-select">
<input value="thumbs-up-1.png" class="dd-selected-value" type="hidden"><a class="dd-selected"><img class="dd-selected-image" src="/images/rewards/positive/thumbs-up-1.png"><label style="line-height: 60px;" class="dd-selected-text">Thumbs Up 1</label></a><span class="dd-pointer dd-pointer-down"></span></div><ul style="width: 260px;" class="dd-options dd-click-off-close"><li><a class="dd-option dd-option-selected">
<input class="dd-option-value" value="thumbs-up-1.png" type="hidden"> <img class="dd-option-image" src="/images/rewards/positive/thumbs-up-1.png"> <label class="dd-option-text">Thumbs Up 1</label></a></li></ul></div>

Answer 1

应用具有较高z-index的绝对位置属性值，然后用左、右、下、上调整位置。

    .menu-class {
    position: absolute;
    top: 0; /* adjust as needed */
    bottom: 0;/* adjust as needed */
    left: 0; /* adjust as needed */
    right: 0; /* adjust as needed */
    z-index: 999;
 }

下拉菜单不与父菜单重叠 div (bootstrap2)

Dropdown menu isn't overlapping parent div (bootstrap2)

html

css

twitter-bootstrap

yii