css遮罩层与fixed

最新推荐文章于 2021-07-10 11:18:54 发布

weixin_30642267

最新推荐文章于 2021-07-10 11:18:54 发布

阅读量232

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/xuzhiheng/archive/2013/05/28/3104236.html

版权

页面上经常用到遮罩层，

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">

<head>

<title>fixed</title>

{

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>

content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content

</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; }

转载于:https://www.cnblogs.com/xuzhiheng/archive/2013/05/28/3104236.html