Question

我有一个选择的下拉列表，一旦打开，就会从其父容器中的视图中“隐藏” - 下拉列表是通过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应用绝对位置属性值，然后使用left，right，bottom和top调整位置。

    .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）

1 个答案: