css遮罩层与fixed
css教程 2011-06-30
页面上经常用到遮罩层，
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;
varrelHeight;
if(document.documentElement&&document.documentElement.clientHeight){
vardoc=document.documentElement;
relWidth=(doc.clientWidth>doc.scrollWidth)?doc.clientWidth-1:doc.scrollWidth;
relHeight=(doc.clientHeight>doc.scrollHeight)?doc.clientHeight:doc.scrollHeight;
}
else{
vardoc=document.body;
relWidth=(window.innerWidth>doc.scrollWidth)?window.innerWidth:doc.scrollWidth;
relHeight=(window.innerHeight>doc.scrollHeight)?window.innerHeight:doc.scrollHeight;
}