這里主要是解決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>