最近公司在用layui前端框架重构华丹开发平台的前端显示组件。在将div容器的overflow属性设成auto后，发现layui带的下拉框被会挡住，而原生的下拉框则没有这个问题。这主要是因为layui用<dl>模拟的下拉框，源码如下：

<select name="form_col_FORMMETHOD" value="1" nullable="0" datatype="int" itemdesc="表单方法" precision="4" chkmodified="1" maxlength="5" onblur="javascript:Validate.fireCheckValue(event);">

<option value="">--请选择--</option>

<option value="1" selected="">1:post</option>

<option value="2">2:get</option>

</select>

<div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="--请选择--" value="1:post" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">--请选择--</dd><dd lay-value="1" class="layui-this">1:post</dd><dd lay-value="2" class="">2:get</dd></dl></div>

网上搜索相关问题，得到的答案大部分是说把overflow改成visible，但就是要overflow:auto的效果，此法行不通。

总结网上经验，最后经过试验，总算有了个好的解决方案，如下:

首先在自己的样式表中加上：.layui-form-select dl.layui-anim {position : fixed;}，将dl的固定方式改为fixed.

然后在页面上填加：

$(document).ready(function(){

$("div.layui-form-select").click(function(){

 var scrollTop=$(document).scrollTop();

 var width = $(this).width();

 var top = $(this).offset().top;

 var left = $(this).offset().left;

 $(this).find("dl").css({"min-width":width+"px", top:top-scrollTop+40+"px", left:left+"px"});

 });

 //滚动或是改变窗口大小，弹开的下拉框不会跟随滚动，因为在滚动或窗口改变时，缩回下拉框。

 $(document).scroll(function(){

$("div.layui-form-select").removeClass("layui-form-selected");

 });

 $(window).resize(function(){

$("div.layui-form-select").removeClass("layui-form-selected");

 });

});

通过上述方法，效果基本OK，有些细节还需优化，大家可以在此基础上自行优化。