这里主要是解决overflow的滚动属性（scroll和auto）与position定位两者之间的共存。
如上图类似的效果。
这里解决的关键是：
（1）在父级的同级中增加一个div，实现两个div的同步滚动。
（2）在滚动内容区域的外面添加一个“固定高度”的div。详细作用在代码中有说到。
求解!!!:
点击input框，有时需要双击，下拉菜单才会出现。
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>oveflow:auto(滚动)和position:relative(定位)的问题，其中还嵌套了form表单的前提下</title> </head> <style> *{ font-family: "微软雅黑"; font-size: 14px; } .form-group{ float: left; display: inline-block; } ul{padding: 0;margin: 0;width: 155px;height: 130px;background: #fff; overflow-y: auto;overflow-x: hidden; border: 1px solid #009971;border-radius: 5px; padding-left: 3px;padding-right: 3px;padding-bottom: 20px; position: relative;top:2px;z-index: 1; display: none; } ul li{ list-style: none;border-bottom: 1px solid #E3E3E3; height:38px;line-height: 38px; } @media only screen and (max-width: 875px) { #content{ width: 100%;height: 300px; overflow-x: auto;overflow-y: hidden; } .bigBox{ width: 774px; } .scrollContent{ width: 774px;height: 100%; } } /*--------- 重点来了 ---------*/ #content::-webkit-scrollbar{ display: none; /*将原本滚动区域的滚动条隐藏*/ } .bigContainer{ width: 100%;height: 85px; /*固定高度*/ } .scrollArea{ width: 100%;height: 140px; margin-top: -105px; overflow-x: auto; } input{ position: relative;/*因为scrollArea的存在*/ } </style> <body> <div class="well" id="well" style="width:90%;height:100px;border:1px solid #DFF0D8;margin: auto;padding:20px;background: lightgoldenrodyellow;"> <div class="bigContainer"><!-- 注意：在滚动内容区域外层要加一个有固定高度的div，作用是保证scrollArea的位置 --> <form id="content"> <div class="bigBox"> <div class="form-one" style="height:49px;"> <div class="form-group"> <label>姓名</label> <input style="width:150px;height:32px;border:1px solid #ddd;border-radius: 4px;padding-left: 10px;margin-left:15px;"/> </div> <div class="form-group" style="height:34px;"> <label style="margin-left:15px;margin-right: 29px;">性别</label> <input class="sexVal" id="sexVal" style="width:150px;height:32px;border:1px solid #ddd;border-radius: 4px;padding-left: 10px;margin-left:15px;" readonly /> <img class="sexVal" src="image/select.png" style="width: 13px;height:8px;position:relative;left:-30px;"/> <ul id="sex" style="left:91px;"> <li class="sexItem">男</li> <li class="sexItem">女</li> </ul> </div> <div class="form-group" style="height: 34px;"> <label style="margin-left:15px;margin-right: 45px;">爱好</label> <input class="hobbyVal" id="hobbyVal" style="width:150px;height:32px;border:1px solid #ddd;border-radius: 4px;padding-left: 10px;margin-left:15px;" readonly /> <img class="hobbyVal" src="image/select.png" style="width: 13px;height:8px;position:relative;left:-30px;"/> <ul id="hobby" style="left:110px;"> <li class="hobbyItem">男</li> <li class="hobbyItem">女</li> <li class="hobbyItem">吃饭</li> <li class="hobbyItem">睡觉</li> <li class="hobbyItem">打豆豆</li> </ul> </div> </div> <div class="form-two"> <div class="form-group"> <label>电话</label> <input style="width:150px;height:32px;border:1px solid #ddd;border-radius: 4px;padding-left: 10px;margin-left:15px;"/> </div> <div class="form-group" style="height: 34px;"> <label style="margin-left:15px;">自我感觉</label> <input class="feelingVal" id="feelingVal" style="width:150px;height:32px;border:1px solid #ddd;border-radius: 4px;padding-left: 10px;margin-left:15px;" readonly=""/> <img class="feelingVal" src="image/select.png" style="width: 13px;height:8px;position:relative;left:-30px;"/> <ul id="feeling" style="left: 91px;"> <li class="feelingItem">胖</li> <li class="feelingItem">丑</li> <li class="feelingItem">矮</li> <li class="feelingItem">没钱</li> </ul> </div> <div class="form-group" style="height: 34px;"> <label style="margin-left:15px;">觉得Andrea</label> <input class="glorifyVal" id="glorifyVal" style="width:150px;height:32px;border:1px solid #ddd;border-radius: 4px;padding-left: 10px;margin-left:15px;" readonly=""/> <img class="glorifyVal" src="image/select.png" style="width: 13px;height:8px;position:relative;left:-30px;"/> <ul id="glorify" style="left:110px;"> <li class="glorifyItem">美美的</li> <li class="glorifyItem">棒棒的</li> <li class="glorifyItem">最可爱</li> <li class="glorifyItem">最爱吃</li> <li class="glorifyItem">天才</li> </ul> </div> </div> </div> </form> </div> <!----------- 重点来了 -----------> <!--在滚动div的上一级中，增加一个div--> <div class="scrollArea"> <div class="scrollContent"></div> </div> </div> </body> <script src="plugin/jquery.min.js"></script> <script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js" type="text/javascript" charset="utf-8"></script> <script> $(function(){ //两个div同步滚动 $("#content").scroll(function(){ $(".scrollArea").scrollTop($(this).scrollTop()); $(".scrollArea").scrollLeft($(this).scrollLeft()); }) $(".scrollArea").scroll(function(){ $("#content").scrollTop($(this).scrollTop()); $("#content").scrollLeft($(this).scrollLeft()); }) }) $(document).unbind("click").click(function(){ $("ul").hide();//点击文本其他区域的时候，下拉菜单隐藏 }) $("ul li ").hover(function(){//每个选项鼠标经过的颜色变化 $(this).css("background","#62b2ad") $(this).css("border","none") },function(){ $(this).css("background","#fff") $(this).css("border-bottom","2px solid #dedede") }) var show = false; $(".sexVal").unbind("click").click(function(){ $("#hobby").hide();//其他下拉菜单全部隐藏 $("#feeling").hide(); $("#glorify").hide(); if(show == false){ $("#sex").show(); show = true; } else if(show = true){ $("#sex").hide(); show = false; } $(".sexItem").unbind("click").click(function(){ $("#sexVal").attr("value",$(this).context.innerHTML);//给input框赋值 }) return false;//阻止冒泡 }) $(".hobbyVal").unbind("click").click(function(){ $("#sex").hide();//其他下拉菜单全部隐藏 $("#feeling").hide(); $("#glorify").hide(); if(show == false){ $("#hobby").show(); show = true; } else if(show = true){ $("#hobby").hide(); show = false; } $(".hobbyItem").unbind("click").click(function(){ $("#hobbyVal").attr("value",$(this).context.innerHTML);//给input框赋值 }) return false;//阻止冒泡 }) $(".feelingVal").unbind("click").click(function(){ $("#sex").hide();//其他下拉菜单全部隐藏 $("#hobby").hide(); $("#glorify").hide(); if(show == false){ $("#feeling").show(); show = true; } else if(show = true){ $("#feeling").hide(); show = false; } $(".feelingItem").unbind("click").click(function(){ $("#feelingVal").attr("value",$(this).context.innerHTML);//给input框赋值 }) return false;//阻止冒泡 }) $(".glorifyVal").unbind("click").click(function(){ $("#sex").hide();//其他下拉菜单全部隐藏 $("#hobby").hide(); $("#feeling").hide(); if(show == false){ $("#glorify").show(); show = true; } else if(show = true){ $("#glorify").hide(); show = false; } $(".glorifyItem").unbind("click").click(function(){ $("#glorifyVal").attr("value",$(this).context.innerHTML);//给input框赋值 }) return false;//阻止冒泡 }) </script> </html>
