css遮罩层与fixed
页面上经常用到遮罩层，
1.下面用纯css写的一个兼容ie6/7/8/9/firefox/chrome/opera/safari
还有IE6给body或html加固定背景图滚动条滚动时模拟fixed的absolute层不抖动。
详细见代码：
<!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=gb2312" />
<title>fixed</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html
{
_background:#151515 url(*) fixed; /*html或body加固定的背景图ie6滚动时不抖动*/
}
#overlay
{
width:100%;
height:100%;
position:fixed;
_position:absolute;
_width:expression(document.documentElement.scrollWidth);
_height:expression(document.documentElement.scrollHeight);
left:0;
top:0;
background:#999999;
filter:alpha(opacity=50);
opacity:0.5;
z-index:1000;
}
.ads
{
position:fixed;
_position:absolute;
_top:expression(eval(100 + document.documentElement.scrollTop));
top:100px;
left:0;
width:200px;
height:200px;
border:1px solid #006633;
background:#996699;
z-index:2000;
}
.content
{
height:9000px;
width:9000px;
}
</style>
</head>
<body>
<div id="overlay"></div>
<div class="ads"></div>
<div class="content">
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
</div>
</body>
</html>
2.用脚本
var relWidth; var relHeight; if (document.documentElement && document.documentElement.clientHeight) { var doc = document.documentElement; relWidth = (doc.clientWidth > doc.scrollWidth) ? doc.clientWidth - 1 : doc.scrollWidth; relHeight = (doc.clientHeight > doc.scrollHeight) ? doc.clientHeight : doc.scrollHeight; } else { var doc = document.body; relWidth = (window.innerWidth > doc.scrollWidth) ? window.innerWidth : doc.scrollWidth; relHeight = (window.innerHeight > doc.scrollHeight) ? window.innerHeight : doc.scrollHeight; }
