Question

我正在尝试创建一个html下拉列表，该列表在选中时应该位于其他div之上，但它会将下面的div向下移动并在选择下拉项后将它们放在那里。我试过的代码是小提琴here。如何在选择时在下面的div上浮动下拉？

<div class="outer" >  
       <select id="myselect" style="width:100px;">
           <option>abc</option>
           <option>def</option>
           <option>ghi</option>
           <option>jkl</option>
          <option>abc</option>
           <option>def</option>
           <option>ghi</option>
           <option>jkl</option>

    </select>
</div>
   <div class="inner">Enter Name</div>
   <div class="inner">Enter Class</div>

</div>

 $('#myselect').on('mousedown focus', function () {
                    $('#myselect').attr('size', 11);
                    $('#myselect').css('height', '80px');
                    $('.outer').css('height', '80px');
     $('.outer').css('overflow-y', 'scroll');
                });


   $('#myselect').on('change', function () {
                    $('#myselect').attr('size', '1');
                    $('#myselect').css('height', '20px');                    
                });

Answer 1

您应该重置.outer的高度，如下所示：

            $('.outer').css('height', 'auto');

请参阅http://jsfiddle.net/RK6EF/8/了解修复

Answer 2

如果您想要的是将下拉列表保留在div的顶部，请尝试将下拉列表的位置设置为绝对值

$('.outer').css('position', 'absolute');

JS Fiddler

Answer 3

如果希望元素重叠，则必须使用position：absolute Overlapping elements in CSS

CSS html下拉列表向下移动div

3 个答案: