参考：http://www.cnblogs.com/cloudgamer/archive/2008/09/15/1290954.html
以前也曾经用到过
1.主要依赖于css的( body，html 的css代码必须，没有解决ie6下 select z-index 无限大的缺点)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* {padding:0; margin:0}
html { height:100%}
body {height:auto !important;min-height:100%;height:100%;position:relative;}
.cscontent {height:1550px;}
.zhez {height:100%; 100%;background:#000;opacity:0.3;filter:alpha(opacity=30); position:absolute; top:0; left:0; z-index:10;}
.content {50px; height:50px;position:absolute;top:0;left:50%; margin-left:-25px;z-index:20; }
</style>
</head>
<body>
<div class="cscontent">
测试内容<select><option>1111</option></select>
</div>
<div class="zhez"></div>
<div class="content">content</div>
</body>
</html>
上面的代码加上jquery 的 scroll() 的时候 ie6下出错,不知道为什么？？？添加scroll()后的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* {padding:0; margin:0}
html {height:100%}
body {height:auto !important;min-height:100%;height:100%;position:relative;}
.cscontent {height:1550px;}
.zhez {height:100%; 100%;background:#000;opacity:0.3;filter:alpha(opacity=30); position:absolute; top:0; left:0; z-index:10;}
.content {50px; height:50px;position:absolute;top:0;left:50%; margin-left:-25px;z-index:20; }
</style>
<script type="text/javascript" src="jquery 插件/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function(){
var $css_top=parseInt( $(".content ").css("top") );
$(window).scroll(function(){
var $s_top=$(window).scrollTop();
$(".content ").css({"top":$s_top+$css_top});
});
//var _manh=$("body").height();
//$(".zhez").css({"height":_manh})
})
</script>
</head>
<body>
<div class="cscontent">
测试内容<select><option>1111</option></select>
</div>
<div class="zhez"></div>
<div class="content">content</div>
</body>
</html>
上面的代码 将注释去掉后 可以实现完美 遮罩层，但是 滚动条滚动时候，内容总是抖动。。。？？？覆盖select有两个比较好的方法：
1，显示层时，先隐藏select，关闭层时再重新显示；
2，用一个iframe作为层的底，来遮住select。
css代码比较难理解，主要是兼容性问题，用jquery就简单了很多：